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

Question

I am trying to plot chart using canvas.js !我正在尝试使用canvas.js绘制 plot 图表！

As I want the data dynamically from my API, I created an array and is then passing it into the json object.由于我希望从我的 API 动态获取数据，因此我创建了一个数组，然后将其传递给 json object。

so I did the following:所以我做了以下事情：

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

Here, I cant read the data_array.在这里，我无法读取 data_array。 How do I pass it in the chart data?如何在图表数据中传递它？ Above way is not working!以上方法行不通！ But when I pass data in a static way it works!但是当我以 static 的方式传递数据时，它可以工作！

My array is in exact format as shown example of static information!我的数组的格式与 static 信息示例的格式完全相同！

output of console.log(data_array) = console.log(data_array) 的 output =

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

Answer 1

The problem is in how you try to track your ajax request.问题在于您如何尝试跟踪您的 ajax 请求。

The onredystatechange event fires multiple times during the executon of the xhr request.在执行 xhr 请求期间， onredystatechange事件会触发多次。

0 - UNSENT Client has been created. 0 - 已创建未发送的客户端。 open() not called yet. open() 尚未调用。

1 - OPENED open() has been called. 1 - 已调用 OPENED open()。

2 - HEADERS_RECEIVED send() has been called, and headers and status are available. 2 - HEADERS_RECEIVED send() 已被调用，并且标头和状态可用。

3 - LOADING Downloading responseText holds partial data. 3 - 加载下载 responseText 保存部分数据。

4 - DONE The operation is complete. 4 - DONE 操作完成。

It is only when the state is 4 that you should start processing your data.只有当 state 为 4 时，您才应该开始处理数据。

xhr.onreadystatechange = function () {

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

       //Process your data

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-10-01 07:15:21

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-10-01 07:15:21

解决方案1
2 已采纳 2019-10-01 07:15:21