Question

我试图使用AJAX获取图表JS的数据。我搜索了所有论坛，包括stackoverflow，但它们似乎都没有工作。这是我的代码。

var chartData = {};

function respondCanvas() {
    new Chart(document.getElementById("exampleChartjsLine").getContext("2d")).Line(chartData);
}


var GetChartData = function () {
    $.ajax({
        url: "/control-panel/actions/saleStatistic.php",
        method: 'POST',
        data: {command: "authorsGrid"}
    }).done(function (data) {
        var chartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            scaleShowGridLines: true,
            scaleShowVerticalLines: false,
            scaleGridLineColor: "#ebedf0",
            datasets: [{
                fillColor: "rgba(204, 213, 219, .1)",
                strokeColor: $.colors("blue-grey", 300),
                pointColor: $.colors("blue-grey", 300),
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: $.colors("blue-grey", 300),
                data: data
            }, {
                fillColor: "rgba(98, 168, 234, .1)",
                strokeColor: $.colors("primary", 600),
                pointColor: $.colors("primary", 600),
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: $.colors("primary", 600),
                data: [28, 48, 40, 19, 86, 27, 90]
            }]
        };
        respondCanvas();
    });
};

    $(document).ready(function() {
        GetChartData();
    });

我得到的是来自控制台日志的错误：

Console Log Error

Ajax调用在Javascript中返回数组，就像它应该在图表js中一样：

Ajax Callback

非常感谢任何形式的帮助。

-----更新（根据Quince的回答）-----

var chartData = {};

function respondCanvas(data) {
    new Chart(document.getElementById("exampleChartjsLine").getContext("2d")).Line(data);
}



var GetChartData = function () {
    $.ajax({
        url: "/control-panel/actions/saleStatistic.php",
        method: 'POST',
        data: {command: "authorsGrid"},
        success: function(data) {
           chartData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                scaleShowGridLines: true,
                scaleShowVerticalLines: false,
                scaleGridLineColor: "#ebedf0",
                datasets: [{
                    fillColor: "rgba(204, 213, 219, .1)",
                    strokeColor: $.colors("blue-grey", 300),
                    pointColor: $.colors("blue-grey", 300),
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: $.colors("blue-grey", 300),
                    data: data
                }, {
                    fillColor: "rgba(98, 168, 234, .1)",
                    strokeColor: $.colors("primary", 600),
                    pointColor: $.colors("primary", 600),
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: $.colors("primary", 600),
                    data: [28, 48, 40, 19, 86, 27, 90]
                }]
           };
           respondCanvas(chartData);
        }
    });
};

    $(document).ready(function() {
        GetChartData();
    });

Answer 1

您声明chartData两次，reposondCanvas内使用的那个不是您在done中写的那个。将chartData作为参数传递给respondCanvas并删除全局refence（如果您不需要不断更新数据，我会建议这样做）或从第二个声明中删除var < / p>

是否可以使用ajax获取图表js数据？

1 个答案: