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