highcharts 棒棒糖/哑铃图改变正负标记值的位置/颜色答案

【问题标题】：highcharts lollipop/dumbbell chart change position/colour of positive and negative marker valueshighcharts 棒棒糖/哑铃图改变正负标记值的位置/颜色
【发布时间】：2020-03-25 11:01:18
【问题描述】：

我正在尝试创建一个棒棒糖图表，其中一些值为负数，一些值为正数，在零的任一侧，如下所示：

image

但是图表似乎只允许标记位于图表的“高”端。有没有办法控制哪一端有标记？

我正在使用这些图表选项：

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

      }

【问题讨论】：

标签： highcharts position marker

【解决方案1】：

在这种情况下应该使用的系列是棒棒糖，但对象数组配置似乎不起作用。我在 Highcharts Github 问题频道上报告了它，你可以关注这个帖子：https://github.com/highcharts/highcharts/issues/13202

作为哑铃系列中的一个解决方案，我建议在 render 回调中找到这些图形并隐藏它们。

演示：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 链接下，出现了解决方法。请检查一下，也许会更适合您的要求。

【讨论】：