使用JSON响应在chart.js中绘制折线图

Question

<script type="text/javascript">
            $(function() {
                $.ajax({
                    type: "POST",
                    url: "BillnAmount",
                    cache: false,
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);

                        var data = {
                            labels: ["January", "February", "March", "April", "May", "June", "July"],
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: [65, 59, 80, 81, 56, 55, 40]
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: [28, 48, 40, 19, 86, 27, 90]
                                }
                            ]
                        };
                        var ctx = $("#myChart").get(0).getContext("2d");
                        var myNewChart = new Chart(ctx);
                        var myLineChart = new Chart(ctx).Line(data);
                    }
                });
            });
        </script>

我正在使用ajax调用一个url并以json格式获取其响应。

在ajax调用中，我正在使用Chart.js绘制折线图，这个过程运作良好。

现在我想使用json响应数据更改上面图表的值，我的json响应值是：

  {"billDetails":
 [{"invoiceDate":"2014-07-24T00:00:00","totalAmount":1031.00,"totalBills":1},  
 {"invoiceDate":"2014-07-15T00:00:00","totalAmount":7281.00,"totalBills":3},
 {"invoiceDate":"2014-07-12T00:00:00","totalAmount":14841.00,"totalBills":7},
 {"invoiceDate":"2014-07-11T00:00:00","totalAmount":1294.00,"totalBills":3},
 {"invoiceDate":"2014-07-10T00:00:00","totalAmount":674.00,"totalBills":3},
 {"invoiceDate":"2014-07-09T00:00:00","totalAmount":2.00,"totalBills":1},
 {"totalAmount":114.00,"totalBills":10}]}

我需要做哪些更改才能从JSON响应中显示数据？

编辑：我尝试了这个：

var data1;
  $.each(data.billDetails, function(i, value) {
                        data1 = {
                            labels: data.billDetails[i].invoiceDate,
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: data.billDetails[i].totalBills
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: data.billDetails[i].totalAmount
                                }
                            ]
                        };
                    });

在控制台上显示以下内容：

Uncaught TypeError: Cannot read property 'x' of undefined 

我的数据格式

2014-07-24T00:00:00 1 1031 
2014-07-15T00:00:00 3 7281 
2014-07-12T00:00:00 7 14841
2014-07-11T00:00:00 3 1294
2014-07-10T00:00:00 3 674 
2014-07-09T00:00:00 11 116 

它只显示以下图片：

- xrcwrn

---

这不是一个编写代码的服务。你尝试过什么？你的问题在哪里？ - RoToRa

@RoToRa，请查看我的更新。 - xrcwrn

错误意味着你在某个地方有一个名为 x 的变量/属性。你需要找出到底是哪一行抛出了这个错误。 - RoToRa

@RoToRa 这是在 chart.js 的第 ctx.lineTo(dataset.points[dataset.points.length-1].x, this.scale.endPoint); 行。 - xrcwrn

@RoToRa，我想知道从JSON获取数据的上述代码是否正确。 - xrcwrn

Answer 1

你走在正确的道路上，需要遍历你的json数据并将其转换成chart.js能够理解的结构。

你应该从一个包含所有静态信息的空结构开始：

var chartData = {
  labels: [], // currently empty will contain all the labels for the data points
  datasets: [
    {
      label: "Total Bills",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [] // currently empty will contain all the data points for bills
    },
    {
      label: "Total Amount",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [] // currently empty will contain all the data points for bills
    }
  ]
};

到目前为止，这不会打印您的图表，但它包含所有必要的信息，如线条标签和颜色。

现在遍历您的数组：

$.each(data.billDetails, function(position, billDetail) {
  // first use the invoiceDate as a label
  if (billDetail.invoiceDate) {
    // You should probably format that
    chartData.labels.push(billDetail.invoiceDate); 
  } else {
    // your last data entry doesn't have an invoiceDate
    chartData.labels.push(''); // blank or think of something creative
  }

  // add the totalBills and totalAmount to the dataset
  chartData.datasets[0].data.push(billDetail.totalBills);
  chartData.datasets[1].data.push(billDetail.totalAmount);
});

现在，您可以让chart.js渲染chartData。

- Kevin Sandow

---

我再次尝试了上述代码，但出现了“Uncaught TypeError: Cannot read property 'x' of undefined”错误，位于Chart.js的2693行。我尝试的代码是http://jsfiddle.net/xrcwrn/t3MVa/。 - xrcwrn

很遗憾，你的jsfiddle没有任何帮助。 - Kevin Sandow

我犯了一个错误 - 编辑了我的答案，使用 Array.push() 而不是 Array.pop()。 - Kevin Sandow

你好，你能帮我解决这个问题吗：https://dev59.com/N4vda4cB1Zd3GeqPXUzq - vini

Answer 2

你的JSON结果应该与chardata具有相同的结构，然后你可以这样做

    var charData = 
    {
        labels = [\\months]
        datasets: data.datasets
    }

假设你的回应（我这里是data.datasets）的结构与这些示例代码中硬编码的结构相同。

- RandomBoy