时间戳

首页 > 解决方案 > 在 Chart.js 中映射数据（来自 getJSON 响应）

javascript - 在 Chart.js 中映射数据（来自 getJSON 响应）

问题描述

我在将数据解析到图表时遇到问题。当然，这应该包含在我使用 getJSON 并且不想使用 ajax 的自动过程中，所以我有：

$.getJSON('file.json').done( function (results) {  

        var labels = [];
        var data = [];

        var labels = results.map(function (item) {
            return item.updatedLaels
        });

        var data = results.map(function (item) {
            return item.updatedData;
        });

        console.log(labels)
        console.log(data)
    });

因此，当然标签和数据会以适当的方式记录到控制台，例如：

(5) [1,2,3,4,5]

但是如何在这部分使用它：

var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Example',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
    });

因为 index.html 会生成一个没有数据的空图表。如何以正确的方式映射标签和数据？

标签： javascriptjquerychart.js

解决方案

labels和data变量是undefined你$.getJSON的done callback功能之外。

done您可以在ie中调用一个函数，createChart(labels, data)也可以将图表代码带入其中done

$.getJSON('file.json').done( function (results) {  

        var labels = [];
        var data = [];

        var labels = results.map(function (item) {
            return item.updatedLabels
        });

        var data = results.map(function (item) {
            return item.updatedData;
        });

        // Create chart
        createChart(labels, data);

});

function createChart(labels, data) {
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Example',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
    });

}

推荐阅读