Question

我正在尝试使用canvas.js绘制图表！

由于我希望动态地从API中获取数据，因此我创建了一个数组，然后将其传递到json对象中。

所以我做了以下事情：

    <!DOCTYPE HTML>
    <html>
    <head>  
    <script>

    var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "url";
    xhr.open(method, url, true);

    var data_array = [];
    xhr.send();

    window.onload = function () {

        xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && xhr.status === 200) {
                var api_data = xhr.responseText;
                var api_json = JSON.parse(api_data); 
                var data = api_json["data"];

                for(var i=0; i<data.length; i++) {

                    dp_data = data[i];
                    dp_median = dp_data["dp_median_price"];
                    dp_date = dp_data["date"];

                    var datearray = dp_date.split("-");
                    var newdate = datearray[0] + ', ' + datearray[1] + ', ' + datearray[2];

                    data_array.push({x:newdate, y:Number(dp_median)});
                }

                var chart = new CanvasJS.Chart("chartContainer", {
                    title: {
                        text: "title"
                    },
                    axisX: {
                        valueFormatString: "YYYY MM DD"
                    },
                    axisY2: {
                        title: "Median Price",
                        prefix: "₹",
                        suffix: ""
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer",
                    verticalAlign: "top",
                    horizontalAlign: "center",
                    dockInsidePlotArea: true,
                    itemclick: toogleDataSeries
                },
                data:[
                    {
                        type:"line",
                        axisYType: "secondary",
                        name: "name1",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "₹#,###",
                        dataPoints: [
                            { x: new Date(2015, 08, 01), y: 648 },
                            { x: new Date(2015, 09, 01), y: 649 },
                            { x: new Date(2015, 10, 01), y: 649 },
                            { x: new Date(2017, 03, 01), y: 400 },
                            { x: new Date(2017, 04, 01), y: 749 },
                            { x: new Date(2017, 05, 01), y: 740 }]
                    },
                    {
                        type:"line",
                        axisYType: "secondary",
                        name: "name2",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "₹#,###",
                        dataPoints: data_array
                    }
                ]
            });

            chart.render();

            function toogleDataSeries(e){
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else{
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        }   
    }   
};

</script>

</head>

<body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

在这里，我无法读取data_array。如何在图表数据中传递它？以上方式不起作用！但是，当我以静态方式传递数据时，它会起作用！

我的数组的格式与静态信息示例相同！

console.log（data_array）=

的输出

    0:
      x: "2019, 08, 29"
      y: 1935
    __proto__: Object

Answer 1

问题出在您如何跟踪ajax请求上。

在执行xhr请求期间，onredystatechange事件会多次触发。

0-已创建UNSENT客户端。 open（）尚未调用。

1-OPENED open（）已被调用。

2-已调用HEADERS_RECEIVED send（），并且头和状态可用。

3-加载下载responseText保存部分数据。

4-完成完成操作。

只有在状态为4时，您才应该开始处理数据。

xhr.onreadystatechange = function () {

   if (xhr.readyState ==0 4 and xhr.status === 200) {

       //Process your data

可视化数据的正确方法是什么？

1 个答案: