带有 Javascript 数组的 Chartjs 标签

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()返回一个仅包含值的新数组。