时间戳

首页 > 解决方案 > 用于绘制 Visual Studio 图表的 XML 数据

javascript - 用于绘制 Visual Studio 图表的 XML 数据

问题描述

我尝试从 XML 获取数据到 Visual Studio 中的图表。

这是我的测试 XML 文件

<data>
<point>
<x>5</x>
<y>5</y>
</point>
<point>
<x>6</x>
<y>7</y>
</point>

当我单击开始时，页面为空并且不显示图表。我究竟做错了什么？

    <script type="text/javascript">
$(document).ready(function () {

            var dataPoints = [];

            $.get("test.xml", function (data) {
                $(data).find("point").each(function () {
                    var $dataPoint = $(this);
                    var x = $dataPoint.find("x").text();
                    var y = $dataPoint.find("y").text();
                    dataPoints.push({ x: parseFloat(x), y: parseFloat(y) });
                });

                var chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled: true,
                    theme: "light2",
                    title: {
                        text: "test chart",
                    },
                    data: [{
                        type: "spline",
                        dataPoints: dataPoints,
                    }]
                });

                chart.render();

            });

        });
        </script>

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>

如果我在代码中提供数据，图表就可以工作。文件中的数据不起作用

标签： javascriptxmlcharts

解决方案

当您获得您的 XML 文档时，您需要首先解析它，因为您的“数据”实际上是一个字符串。当您解析它时，您会注意到您的 XML 文档无效（</data>最后您忘记了）

const data = `<data><point><x>5</x><y>5</y></point><point><x>6</x><y>7</y></point></data>`

const res = $.parseXML(data);

$(res).find("point").each(function() {
  var $dataPoint = $(this);
  var x = $dataPoint.find("x").text();
  var y = $dataPoint.find("y").text();
  console.log(x, y);
});

console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读