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：

#-------------------------------------------------
#
# Project created by QtCreator 2016-11-02T13:48:06
#
#-------------------------------------------------

QT       += core gui serialport


greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = LEDfade
TEMPLATE = app


SOURCES += main.cpp\
        mainwindow.cpp

HEADERS  += mainwindow.h

FORMS    += mainwindow.ui

创建图表：

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

我必须使用空标签和数据集指定类型和数据对象，以便在屏幕上呈现为空图表。

我更新图表的功能：

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

     UpdateChart(myChart)
});

我尝试过map.data = data，但这对我不起作用。在更新之前，我必须专门更新data.labels和data.datasets。

Answer 2

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

您必须确保使用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.php文件只包含响应json代码，如下所示。

{ “结果”：真， “消息”：NULL， “数据”：{ “标签”：[ “植物”， “过程”]， “chartData”：[ “10”， “1”]}}

如何在ajax调用中向Chart添加数据？

2 个答案: