将 XML 数据解析为图表.js折线图

Parse XML data into Chart.js Line Chart

本文关键字：js 折线图 XML 数据      更新时间：2023-09-26

我正在尝试将两个JavaScript合并为一个，但正在努力使其工作。我不确定我想要做的事情是否可行，但我认为 stackoverflow 是获得帮助的最佳场所。

第一个javascript是Chart.js，特别是折线图选项。第二个脚本是w3schools的HTML脚本中的XML。

我想做的是使用 XML 文件来填充折线图的数据。我相应地修改了代码，但我对javascript只有非常基本的了解，无法让它工作。这是我尝试过的：

<canvas id="canvas1" width="350" height="300"></canvas>
<script>
   if (window.XMLHttpRequest)
   {    // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
   }
   else
   {    // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.open("GET","data_chart.xml",false);
   xmlhttp.send();
   xmlDoc=xmlhttp.responseXML; 
   var x=xmlDoc.getElementsByTagName("Row")
   for (i=0;i<x.length;i++)
   var lineChartData = {
                labels : ["1","2","3","4","5"],
                datasets : [{
                     fillColor : "rgba(0,0,0,0.5)",
                     strokeColor : "rgba(0,0,0,1)",
                     pointColor : "rgba(0,0,0,1)",
                     pointStrokeColor : "#fff",
                     data : [x[i].getElementsByTagName("data_chart_1")]
                   }]
           }
   var myLine = new   
   Chart(document.getElementById("canvas1").getContext("2d")).Line(lineChartData);
</script>

因此，这个想法是通过从 XML 文件中获取行data_chart_1中的所有元素来填充变量lineChartData的数据部分data_chart.xml。这样的事情可能吗？我必须如何更新代码才能使其正常工作？

非常感谢您的帮助。我希望我的问题很清楚。

试试这个

var firstRow = xmlDoc.getElementsByTagName("Row")[0];
//console.log(firstRow);
var dataChart = firstRow.firstChild.nodeValue;
//console.log(dataChart);
var chartData = dataChart.split(",");
.......................
data : chartData
相关文章：