如何在Highcharts中將標記添加到分組的條形圖中？

Question

我正在使用Highcharts創建分組的條形圖，並希望為每個條形添加標記。

我創建了一個多序列圖（條形圖+散點圖），該圖與我想要的相似，但是由於沒有“分組的散點圖”，因此圓圈標記居中（下面的截圖）。

有沒有一種方法可以更改它，使標記與條形顯示在同一行上？

JSFiddle

高圖配置

{
        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/