Dynamic data from xml into Jqplot for pie chart Options_问答_开发者

Dynamic data from xml into Jqplot for pie chart Options

开发者 https://www.devze.com 2023-02-20 01:05 出处：网络

I have been trying to create a pie chart using an array that extracts data from an xml file. It does display the pie chart but the size of the sectors do not

I have been trying to create a pie chart using an array that extracts data from an xml file. It does display the pie chart but the size of the sectors do not correspond to the values in the array. Surprisingly, the code works if I use a static array.

This is the xml file:

<?xml version="1.0" ?> 
 <A> 
  <a1>a1</a1> 
  <a2>a2</a2> 
 <C>20</C> 
 <C>30</C> 
 <C>50</C> 
 <C>60</C> 
 <C>70</C> 
 </A>

This is the javascript file(I have written only the main code):

var x=xmlDoc.getElementsByTagName("A"); 
var myvalues=new Array(); 
var staticarray = {5,5,5}; 


for (i=0;i<x.length;i++) 
{ 
myvalues[i]=x[i].getElementsByTagName("C")[0].childNodes[0].nodeValue; 
 } 


$(document)开发者_开发知识库.ready(function(){ 
$.jqplot.config.enablePlugins=true; 
 plot1 = $.jqplot('chart1', [myvalues]);    // Doesn't work 
 plot2 = $.jqplot('chart2', [staticarray]);  // Works

Use parseInt() to convert the node value to an integer.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.pieRenderer.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
</head>
<body>
    <div class="jqPlot" id="chart1" style="height: 480px; width: 90%;"></div>
    <script type="text/javascript">
  $.jqplot.config.enablePlugins = true; 

  xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET","test.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;

  var x=xmlDoc.getElementsByTagName("C"); 
  var myvalues=new Array(); 
  for (i=0;i<x.length;i++) { 
    myvalues[i]=parseInt(x[i].childNodes[0].nodeValue); 
  } 

  $(document).ready(function(){ 
      $.jqplot.config.enablePlugins=true; 
        plot1 = $.jqplot('chart1', [myvalues], {
         seriesDefaults:{renderer:$.jqplot.PieRenderer}
        });
  });
    </script>
</body>
</html>