如何在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中得到验证)。只是什么都没发生。我有一种感觉，这与我如何将data应用于图表有关。如果我以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。

Answer 2

我做得很好，请看下面的代码。

您必须确保您正在使用更新的.js文件的chart.js插件。当然，您必须在每个javascript文件的基础上包含Jquery插件。

对于这个复制，我使用了jquery和chart.js提供的cdn。

<canvas id="chart" height="400px" width="400px"></canvas>

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script     src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js">    </script>
<script>

$.ajax({
        url: "http://localhost:8081/chart.php",
        dataType: "json",
        success: function(response)
        {
            var ctx = document.getElementById("chart");
            var myBarChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: response.data.labels,
                    datasets: [{
                        label: 'Number of Active Customers',
                        data: response.data.chartData,
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(255, 99, 132, 0.2)'
                        ],
                        borderColor: [
                            'rgba(75, 192, 192, 1)',
                            'rgba(255,99,132,1)'
                        ],
                        borderWidth: 1
                    }]
                }
            });
        }
});
</script>

chart.php文件只包含响应JSON代码，如下所示。

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