Два типа графика в одном?
-
26-10-2019 - |
Вопрос
Можно ли генерировать таблицу, подобную следующему, с HighCharts? Если так, как бы я это сделал?
Верхняя диаграмма не является проблемой. Кроме того, мне нужны сложенные блоки ниже. План бые было достаточно.
Я унаследовал проект от коллеги, который уже использует Highcharts, и теперь мне нужно расширить функциональность.
Решение
Да, это возможно. Я собрал jsfiddle, чтобы имитировать то, что вы хотите сделать.
http://jsfiddle.net/vbpds/4312/
Итак, важная часть:
В вашей коллекции серии вы должны сказать, что вы хотите, чтобы конкретная серия была типа столбца (если ваш тип по умолчанию установлен в строке, то есть, если тип не определен в серии, он будет автоматически нарисован Как по умолчанию установлена).
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
stack:'1'
},{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
stack:'1'
}
, {
data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4]
},{
data: [100, 110, 120, 130, 140, 150, 140, 130, 120, 110, 100, 110]
}]
Теперь, поскольку вы также хотите, чтобы столбцы были складывались, вы должны сказать ему, какие группы данных нужно сложить друг с другом. Таким образом, вы устанавливаете свойство стека на все, что хотите, но просто убедитесь, что они совпадают, чтобы они были «связаны» вместе.
РЕДАКТИРОВАТЬ: Кстати, документация по API Highcharts отличная! Проверьте это для получения дополнительной информации: http://www.highcharts.com/ref/