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

【问题标题】：How to add markers to a grouped bar plot in Highcharts?如何向 Highcharts 中的分组条形图添加标记？
【发布时间】：2023-04-04 19:18:01
【问题描述】：

我正在使用 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'
          }
        ]
    }

【问题讨论】：

标签： javascript highcharts

【解决方案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/

【讨论】：