javascript - 如何通过 ajax 调用将数据添加到图表中？

Question

我正在尝试使用 Chart.js 将从 ajax 调用获得的数据添加到图表中。

以下代码不起作用:

$(document)
        .ready(function () {

            fetchBeds($("#site").val());

            var ctx = $('#paretoChart');
            var paretoChart = new Chart(ctx);

            fetchChartData(1, '2016-10-28', '2016-11-2', paretoChart);
        });


function fetchChartData(bed, start, end, chart) {

    $.ajax({
        url: "/reports/fetchChartData",
        type: "GET",
        data: {
            bed: bed,
            start: start,
            end: end

        },
        dataType: "json",
        success: function (response) {

            var chartData = {
                labels: response.data.labels,
                datasets: [{
                        label: 'Pareto of Events',
                        data: response.data.chartData,
                }]
            };

            chart.data = chartData;
            console.log(chart);
            chart.update();
        }
    });
}

运行时，它不会产生任何错误(我的ajax调用工作正常，在firefox中验证)。根本什么也没发生。我有一种感觉，这与我如何将数据应用到图表有关。如果我从 Chart.js 网站获取示例数据并直接在 new Chart(...) 调用中使用它，它就可以正常工作。

创建图表后是否可以应用新数据？

以下是 ajax 调用返回的数据，以防万一:

{"result":true,"message":null,"data":{"labels":["Plant","Process"],"chartData":["1","1"]}}

谢谢!

Answer 1

好吧，我得到了最新的 ChartJS 并根据你的场景进行了尝试。

我的html:

<canvas id="myChart" width="200" height="200"></canvas>

创建图表:

$(function () {
    var ctx = $("#myChart");
    var myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [] } });

     UpdateChart(myChart)
});

我必须指定类型和带有空标签和数据集的数据对象，以便它甚至可以在屏幕上呈现为空图表。

我更新图表的函数:

function UpdateChart(chart) {
            var data =  {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
            }
            chart.data.labels = data.labels
            chart.data.datasets = data.datasets
            chart.update()
        }

我尝试做chart.data = data，但这对我不起作用。在更新之前，我必须专门更新 data.labels 然后 data.datasets。