Столбцы Highcharts с индексом внизу каждого столбца

Question

Я использую старшие графики v.16.0.2 и хочу использовать столбчатую диаграмму в качестве уровня бака. Это означает, что каждый столбец имеет цвет в зависимости от значения ... Как светофор (зеленый, желтый, предупреждение и красный, опасность).

Делая таким образом, легенда бесполезна. Чтобы сделать легенду полезной, я решил удалить цвет легенды с помощью css и отобразить число, соответствующее индексу каждого столбца.

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

Тем не менее, я не знаю, как это сделать, не касаясь текущего поведения / размера каждого столбца. Если я сгруппирую их в одну серию с категориями:

• Легенда показывает только 1 серию
• Размер столбцов различен

Другая альтернатива, которую я подумал, - это просто использовать другую метку (как для значения), но я вижу, что старшая диаграмма поддерживает только 1 dataLabel .. Я могу использовать CSS ... Но я не знаю, как это сделать сохранить значение в центре и индекс внизу.

Есть идеи?

Вот конфиг старших карт:

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

Answer 1

Вы можете установить разные значения 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/

Answer 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,
       ...

Пример: