Javascript - 如何在Highcharts上显示一个数组的特定索引？

Question

我目前有一个数组数据，我正试图在Highcharts上显示。

const data = [10,31,13,19,21]

我在显示一个数组的特定索引时遇到了问题。例如，我想让一列显示为 data: data[0] 其余 data: data[1] 等等。当这样做时，我的图上没有任何数据显示。

当我进行以下操作时，我能够显示数据 data:data 并显示整个数组，这将创建多列，但对于我的情况，喜欢保持每个点在一列。

下面是一个链接 jsfiddle

所需的外观与一个数组的特定索引，即. data: data[1]:

---

如果使用 data: data

这是我的代码。

const data = [10,31,13,19,21]

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: "Bar Graph"
    },
    xAxis: {

    },
    yAxis: {
        min: 0,
        formatter: function () {
            return this.value + "%";
        },
        title: {
            text: '% of Total'
        }
    },
    legend: {
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Low',
        data: data[0],
        showInLegend: false,
    },{
        name: 'Low',           
        data: data[1]
    },{
        name: 'Medium-Low',
        data: data[2]
    }, {
        name: 'Medium',
        data: data[3]
    }, {
        name: 'Medium-High',
        data: data[4]
    }, {
        name: 'High',
        data: data[5]
    }
    ]
});

Answer 1

在 data 必须是一个数组，同时 data[0], data[1], ... 是数字。相反，你需要在数组中分配这些值，比如。data: [data[1]].

演示。https:/jsfiddle.netBlackLabelty42b0hs

    series: [{
        name: 'Low',
        color: '#0D6302',
        data: [data[0]],
        showInLegend: false,
    },{
        name: 'Low',
        color: '#0D6302',
        data: [data[1]]
    }, ...]