如何在ajax调用中将数据添加到图表中

How does one add data to a Chart in an ajax call?

本文关键字：添加 数据 ajax 调用      更新时间：2023-09-26

我正在尝试使用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"]}}

谢谢!

好了，我得到了最新的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()
        }

我试着做图表。数据=数据，但这对我不起作用。我必须专门更新数据。标签然后是数据。更新前的数据集

我工作得很好，见下面我的确切代码。

你必须确保你正在使用更新的。js文件的图表。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"
      ]
   }
}
相关文章：