Столбцы Highcharts с индексом внизу каждого столбца
Я использую высокие диаграммы v.16.0.2, и я хочу использовать столбчатую диаграмму в качестве уровня резервуара. Это означает, что каждый столбец имеет цвет в зависимости от значения ... Как светофор (зеленый ОК, желтый Предупреждение и красный Опасно).
Поступая таким образом, легенда бесполезна. Чтобы сделать легенду полезной, я решил удалить цвет легенды с помощью css и отобразить число, соответствующее индексу каждого столбца.
Однако, чтобы быть полезным, мне нужно добавить дополнительную метку к каждому столбцу с индексом. И эти надписи должны отображаться внизу:
Тем не менее, я не знаю, как это сделать, не касаясь текущего поведения / размера каждого столбца. Если я сгруппирую их в одну серию по категориям:
- Легенда показывает только 1 серию
- Размеры столбцов разные
Другая альтернатива, которую я подумал, - просто использовать другую метку (как и для значения), но я вижу, что highchart поддерживает только 1 dataLabel .. Я могу использовать CSS ... Но я не знаю, как это сделать, чтобы сохранить значение в центре и индекс внизу.
Любая идея?
Вот конфигурация highcharts:
url: https://stackblitz.com/edit/highcharts-example-columns?file=config.js
{
"chart": {
"type": "column",
"zoomType": "x",
"time": {
"timezoneOffset": 60
},
"height": 620,
"events": {}
},
"colors": [
"#BD1315",
"#06bea8",
"#BD1315",
"#06bea8"
],
"title": {
"text": "Example of chart"
},
"xAxis": {
"title": {
"text": null
},
"labels": {
"style": {
"fontSize": "10px"
}
}
},
"yAxis": {
"min": 0,
"max": 97.69,
"title": {
"text": ""
},
"plotLines": [
{
"color": "black",
"dashStyle": "solid",
"width": 2,
"zIndex": 9,
"label": {}
},
{
"color": "black",
"dashStyle": "solid",
"width": 2,
"zIndex": 9,
"label": {}
}
],
"startOnTick": false
},
"tooltip": {
"enabled": true
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true
},
"animation": false,
"events": {}
},
"column": {
"dataLabels": {
"enabled": true,
"allowOverlap": true,
"padding": 0,
"inside": true,
"useHTML": true
},
"animation": false,
"events": {}
}
},
"legend": {
"enabled": true,
"layout": "horizontal"
},
"credits": {
"enabled": false
},
"series": [
{
"name": "1. Concentration of CO2 in BA (%)",
"data": [
97.69
],
"labels": [],
"regression": false,
"regressionSettings": {
"type": "loess",
"extrapolate": 0,
"loessSmooth": 50,
"linetype": "spline",
"dashStyle": "shortdot",
"color": "#7cb5ec",
"lineWidth": 2
},
"visible": true
},
{
"name": "2. BA_pH (N/A)",
"data": [
6.89
],
"labels": [],
"regression": false,
"regressionSettings": {
"type": "loess",
"extrapolate": 0,
"loessSmooth": 50,
"linetype": "spline",
"dashStyle": "shortdot",
"color": "#434348",
"lineWidth": 2
},
"visible": true
},
{
"name": "3. BCN_AgitatorSpeed (rpm)",
"data": [
40
],
"labels": [],
"regression": false,
"regressionSettings": {
"type": "loess",
"extrapolate": 0,
"loessSmooth": 50,
"linetype": "spline",
"dashStyle": "shortdot",
"color": "#90ed7d",
"lineWidth": 2
},
"visible": true
},
{
"name": "4. BCN_O2_Concentration (%)",
"data": [
7.5
],
"labels": [],
"regression": false,
"regressionSettings": {
"type": "loess",
"extrapolate": 0,
"loessSmooth": 50,
"linetype": "spline",
"dashStyle": "shortdot",
"color": "#f7a35c",
"lineWidth": 2
},
"visible": true
}
]
}К сожалению, должна появиться легенда, отображающая все элементы (решение команды UX) ... Только с 4 столбцами все в порядке, но с большим количеством категорий со всем текстом легко перекрывать другие. Вот почему следует применять оба поведения: указатель внизу (без названия) + легенда.
Для справки, это очень плохое решение команды UX. Если другие серии вызывают проблемы с метками столбцов, лучшее решение UX - сделать это горизонтальной гистограммой, которая дает больше места для меток. Не уверен, как правильно настроить то, что вы просите, без каких-либо сложностей.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В качестве примера моего комментария:
http://jsfiddle.net/jlbriggs/wy24bq9c/
Использование categories и установка данных в одну серию:
"series": [{
"data": [
{"y": 97.69, "color": "#BD1315"},
{"y": 6.89, "color": "#06bea8"},
{"y": 40, "color": "#BD1315"},
{"y": 7.5,"color": "#06bea8"},
]
}]
Позволяет меткам быть прямо на диаграмме и устраняет необходимость в посторонних и повторяющихся условных обозначениях, в то же время облегчая пользователю понимание того, какая серия к какой серии.
Используя настройки pointPadding и groupPadding, вы можете контролировать ширину и расстояние между столбцами:
"plotOptions": {
"column": {
"pointPadding": 0.2,
"groupPadding": 0,
...
Пример:
Вы можете установить разные значения данных x для каждой серии. Кроме того, вам придется отключить grouping для серии и установить тип xAxis как category:
"series": [{
"data": [
{x: 1, y: 97.69}
]
},
{
"data": [
{x: 2, y: 6.89}
]
},
{
"data": [
{x: 3, y: 40}
]
},
{
"data": [
{x: 4, y: 7.5}
]
}
]
Живая демонстрация: http://jsfiddle.net/BlackLabel/mc1bt98n/
вот что я нашел! Большое спасибо
«Если я сгруппирую их только в 1 серию с категориями: легенда показывает только 1 серию» Да, но что с того? Если категории отмечены непосредственно на диаграмме, это лучше, чем легенда, и вам действительно не нужна легенда. (если диаграмма помечена напрямую, пользователю не нужно смотреть взад и вперед, чтобы понять, какая серия является какой) «... Размер столбцов отличается» Расположение столбцов будет отличаться от того, в котором они несколько серий, да, но вы можете контролировать все параметры макета, используя такие вещи, как
pointPadding,groupPadding,pointRange,columnWidthи т. д.