Javascript 如何在ajax调用中向图表添加数据？

我试图使用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"]}}

---

谢谢大家!

好吧，我买了最新的ChartJS，并在您的场景中试用了它

我的html：

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

我必须指定类型和一个带有空标签和数据集的数据对象，以便在屏幕上显示为空图表

更新图表的我的函数：

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.dataset。

好的，我得到了最新的ChartJS，并在您的场景中进行了尝试

我的html：

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

我必须指定类型和一个带有空标签和数据集的数据对象，以便在屏幕上显示为空图表

更新图表的我的函数：

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.dataset。

对我来说效果很好，请参见下面的确切代码

您必须确保使用的是chart.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.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>

---

如果手动放置数据是否有效？是的，您可以在创建图表后应用新数据：，我认为问题在于如何在没有数据的情况下实例化图表（即使它是空对象）。如果手动放置数据是否有效？是的，您可以在创建图表后应用新数据：，我认为问题在于如何在没有数据的情况下实例化图表（即使它是一个空对象）。谢谢。我希望有一个更优雅的解决方案，但知道我并不孤单，我感觉好多了。就CTX而言，chart.js文档按我的方式运行。。。我以前用过，很久以前，我记得用你的方式。一定是更新了…如果没有人提出更好的解决方案，我会将其标记为正确。我使用它已经有一段时间了，所以它很可能是一个更新。也许我应该考虑重构我的旧图表代码！我真的希望有人能提供一个更优雅的解决方案。我使用最新的ChartJS更新了我的答案，请检查它是否对您有帮助。谢谢这是完美的，看起来更干净。谢谢。我希望有一个更优雅的解决方案，但知道我并不孤单，我感觉好多了。就CTX而言，chart.js文档按我的方式运行。。。我以前用过，很久以前，我记得用你的方式。一定是更新了…如果没有人提出更好的解决方案，我会将其标记为正确。我使用它已经有一段时间了，所以它很可能是一个更新。也许我应该考虑重构我的旧图表代码！我真的希望有人能提供一个更优雅的解决方案。我使用最新的ChartJS更新了我的答案，请检查它是否对您有帮助。谢谢这是完美的，看起来更干净。