javascript - 如何向 Highcharts 中的分组条形图添加标记？

Question

我正在使用 Highcharts 创建分组条形图，并希望为每个条形图添加标记。

我创建了一个与我想要的类似的多系列(条形+散点)图，但由于没有“分组散点”图，因此圆圈标记居中(下面附有屏幕截图)。

有没有办法改变它，使标记出现在与条形相同的行上？

<强> JSFiddle

Highcharts 配置

{
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['One', 'Two', 'Three']
        },
        tooltip: {
                        enabled: true
        },
        series: [
          {
              name: '2015',
              data: [7, 8, 9]
          }, 
          {
              name: '2015 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [5, 6, 6],
              type:'scatter'
          },
          {
              name: '2016',
              data: [9, 9, 10]
          }, 
          {
              name: '2016 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [10,12,13],
              type:'scatter'
          }
        ]
    }

Answer 1

设置点的 x 值。默认情况下，散点的 x 值是整数 - 0、1、2，因此它们根据类别居中。您可以将它们稍微移动 0.15，然后在 pointFormatter 中将这些值舍入。

    series: [{
  name: '2015',
  data: [7, 8, 9]
}, {
  name: '2015 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [-0.15, 5],
    [1 - 0.15, 6],
    [2 - 0.15, 6]
  ],
  type: 'scatter'
}, {
  name: '2016',
  data: [9, 9, 10]
}, {
  name: '2016 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [0.15, 10],
    [1 + 0.15, 12],
    [2 + 0.15, 13]
  ],
  type: 'scatter'
}]

在pointFormatter中:

    plotOptions: {
  scatter: {
    tooltip: {
      pointFormatter: function() {
        return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
      }
    }
  }
},

示例:http://jsfiddle.net/kh8b4jy3/