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

2022-01-22 00:00:00 json jquery javascript ajax chart.js

<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 格式获取它的响应.

I am calling a url with ajax and getting its response in json format.

在 ajax 调用中，我正在用 Chart.js 绘制折线图，它工作正常.

Inside ajax call I am drawing Line chart with Chart.js which is working properly.

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

Now I want to change above chart value with json response data my json response value is

{"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 响应的数据

What changes should I do so it must display data from json response

我试过这个

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

只显示下图

推荐答案

你在正确的轨道上，你必须遍历你的 json 并将其转换成一个结构，chart.js 会理解.

You're on the right track, you'll have to iterate over your json and convert it into an structure chart.js will understand.

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

You should start with an empty structure containing all the static information:

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 } ] };

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

So far this will not print your chart, but it contains all the necessary information, like line labels and colors.

现在遍历你的数组:

$.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.

And now you can let chart.js render the chartData.

相关文章