Javascript - Как вывести указанный c индекс массива на Highcharts? - PullRequest
Новая
       11

Javascript - Как вывести указанный c индекс массива на Highcharts?

2 голосов
/ 06 мая 2020

В настоящее время у меня есть массив данных, который я пытаюсь отобразить на Highcharts.

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

У меня проблемы с отображением указанного c индекса массива. Например, я хотел бы, чтобы один столбец был data: data[0], другой data: data[1] и т. Д. c .. При этом у меня нет данных, отображаемых на моем графике.

Я могу отображать данные, выполняя data:data и отображая весь массив, который создает несколько столбцов, но для моей ситуации, как сохранить каждую точку в одном столбце.

Вот ссылка в jsfiddle

желаемый вид с указанием c индекса массива, т.е. data: data[1]:

enter image description here

результат при использовании data: data

enter image description here

вот мой код: 

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]
    }
    ]
});

1 Ответ

1 голос
/ 06 мая 2020

data должен быть массивом, а данные [0], данные [1], ... - числа. Вместо этого вам нужно присвоить эти значения в массиве, например: data: [data[1]].

Демо: https://jsfiddle.net/BlackLabel/ty42b0hs/

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