如何在Highcharts中将标记添加到分组的条形图中? [英] How to add markers to a grouped bar plot in Highcharts?

问题描述

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

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.

我创建了一个多序列图(条形图+散点图)，该图与我想要的相似，但是由于没有分组散点图"图，因此圆圈标记居中(下面的截图).

I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).

是否可以更改它，使标记与条形显示在同一行?

Is there a way to change it so the marks appear on the same row as the bar?

JSFiddle

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

推荐答案

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

Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.

    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中:

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

这篇关于如何在Highcharts中将标记添加到分组的条形图中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！