从饼干到Jqplot的动态数据,用于饼图选项

时间:2011-03-28 10:25:21

标签: javascript xml jqplot

我一直在尝试使用提取的数组创建饼图 来自xml文件的数据。 它确实显示饼图,但扇区的大小不显示 对应于数组中的值。令人惊讶的是,代码有效 我使用静态数组。

这是xml文件:

<?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> 

这是javascript文件(我只写了主要代码):

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 

1 个答案:

答案 0 :(得分:0)

使用parseInt()将节点值转换为整数。

<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>