как я могу что-то сделать с моим значением столбцов в highcharts? У меня есть два значения: "total" и "current". Сумма всегда больше, потому что она содержит текущее значение. Я пишу пример в js Fiddle: ссылка на пример
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
Я хочу отобразить диаграмму, где общее значение - максимальное значение столбца и текущего столбца как часть общего столбца. В моем примере в первом столбце "Джон Всего" должно быть 8 и иметь часть "Джон-ток", которая равна 3. В моем примере кода значения суммируются и заканчиваются значением 11. Как я могу исправить это и получить столбцы, как на картинке? Эта серия имеет максимальные значения:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
И эта серия имеет результаты как часть общего. Сколько очков Джон получает от Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
Поэтому первый столбец должен иметь максимальное значение 8 и включать 3, как на картинке. Синяя колонка на картинке должна иметь 8, потому что мы имеем это в первом массиве, а черный столбец должен иметь 3. Как я могу получить это, когда у меня есть значение Maxium и часть этого значения. В одном столбце?
Согласно вашему комментарию
Как я могу получить это, когда у меня есть значение Maxium и часть этого значения. В одном столбце?
В этом случае вы не можете использовать
stacking: 'normal'
Вы должны использовать перекрывающиеся диаграммы столбцов
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
И серии с
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
здесь x значение представляет позицию столбца (если вы не определяете x последовательно, столбец будет перекрывать друг друга)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Обновление согласно OP
Я хочу доставить массив со значениями под переменной в данные: и я хочу заполнить только ось Y без записи {y: array 1 }, {y: array 2 } для каждого значения в массиве
Для этого вы можете использовать функцию отображения массива для обновления массива объекта
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Обновленная демонстрация скриптов
[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]