Question

我有一个Chart.js，其中包含来自Javascript数组的值，看起来完全相同：

var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}');

在这里，我将“obj”数组提供给chartjs，它工作正常并填满了条形码：

var barChartData = {
        labels : obj1,

        datasets : [
            {
                fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
                data : obj

            }
        ]

    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true
        });
    }

    </script>

但正如您所看到的，有一个名为“obj1”的第二个数组存储了标签的名称。这个看起来完全像：

 var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}');

第二个数组没有像其他数组那样填写标签，标签仍然是空的。我不知道为什么它不像数据那样工作：“”。

Answer 1

这似乎有效：

function convertToArray(obj) {
    return Object.keys(obj).map(function(key) {
        return obj[key];
    });
}

var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}');
var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}');

obj = convertToArray(obj);
obj1 = convertToArray(obj1);

var barChartData = {
    labels : obj1,
    datasets : [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data : obj

        }
    ]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="canvas"></canvas>

Object.keys(obj)返回一个对象属性数组，然后我们使用Array#map()函数将这些键转换为实际值。然后Array#map()返回一个只包含值的新数组。

带有Javascript数组的Chartjs标签

1 个答案: