如何从服务器获取 JSON 数据以使用 chart.js 构建图形答案

【问题标题】：how to get JSON data from server to build a graph using chart.js如何从服务器获取 JSON 数据以使用 chart.js 构建图形
【发布时间】：2020-05-07 00:57:30
【问题描述】：

我正在对大多数活动的用户进行排序和展示。从服务器收到，我想使用charts.js将所有数据显示为图表。服务器数据，即“clara，4 个活动”，“joe，7 个活动”。等等……

【问题讨论】：

标签： php jquery mysql ajax

【解决方案1】：

希望对你有帮助

var ctx = document.getElementById("myChart").getContext('2d');

var data = [4, 7];
var labels =  ["clara", "joe"]    

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Activities',
            data: data,
        }]
    },
});

使用 ajax

$.ajax({
    url: "Your url",
    success: function (result) {
        var data = [];
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: result.labels,
                datasets: [{
                        label: 'Activities',
                        data: result.data,
                    }]
            },
        });
    }
});

你必须从后端传递这样的数据集，

{
    "chartData": {
        "labels": [
            "clara",
            "joe"
        ],
        "data": [
            4,
            7
        ]
    }
}

还有一个很好的Tutorial 关于这个。

【讨论】：

谢谢，但我尝试了你发送的内容，它可以工作，但现在“var data = [4,7]”：是我从服务器动态想要的
为此，您可能需要调用 $.ajax 并在成功方法中调用 var myChart = new Chart(ctx,.. 。
请给我发送一个屏幕，其中一个是您如何在 JSON 中转换数据，另一个是向我展示您如何在图表中调用它
我链接的教程对如何做到这一点有完整的描述。认为它会更具描述性和帮助
对不起，我之前很忙。添加了解决方案。请添加所需的网址而不是您的网址