首页 > 解决方案 > 如何从服务器获取 JSON 数据以使用 chart.js 构建图形

问题描述

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

标签: phpjquerymysqlajax

解决方案


希望这可以帮助

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
        ]
    }
}

这里还有一个很好的教程


推荐阅读