如何將標記添加到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/