High-Chart Lollipop / Dumbbell Chart изменить положение / цвет положительных и отрицательных значений маркера

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

образ

Однако, по-видимому, график только позволяет маркеру находиться на «верхнем» конце графика. Есть ли способ контролировать, какой конец имеет маркер?

Я использую эти параметры диаграммы:

chartOptions: {
        chart: {
          type: 'dumbbell',
          inverted: true
        },
        title: {
          text: 'lollipop chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
            text: 'value'
            }
        },
        series: [{
          name: 'value',
          data: [{
              name: 'a',
              low:0,
              high:13,
          }, {
              name: 'b',
              low:0,
              high:26,
          },{
              name: 'c',
              low:-43,
              high:0
          },{
              name: 'd',
              low:-83,
              high:0
          },{
              name: 'e',
              low:0,
              high:113
          }]
        }]

      }

Всего 1 ответ


Серия, которая должна использоваться в этом случае, является леденцом на палочке , но кажется, что конфигурация массива объектов не работает. Я сообщил об этом на канале выпуска Highcharts Github, где вы можете следить за этой веткой: https://github.com/highcharts/highcharts/issues/13202

В качестве решения в серии dumbell я предлагаю найти эти графики в обратном вызове рендера и скрыть их.

Демо: https://jsfiddle.net/BlackLabel/3o7acsbt/

  events: {
    render() {
        let chart = this;

      chart.series[0].points.forEach(p => {
        if (p.low >= 0){
          p.lowerGraphic.hide()
        } else {
            p.upperGraphic.hide()
        }
      })
    }
  }

API: https://api.highcharts.com/highcharts/chart.events.render

РЕДАКТИРОВАТЬ

По ссылке GitHub, обходной путь обнаружился. Пожалуйста, проверьте это, возможно, будет лучше соответствовать вашему требованию.


Есть идеи?

10000