使用自定义视图在 columnrange highcharts 中对类别进行分组

Question

我在 angular 4.

中使用 highcharts

我想创建一个图表来显示这样的结果：

其中：

GHRM 和 HR Scanner 是应用程序名称。
我们正在按组显示一些数据（此处为应用程序）

为了实现上述结果，我尝试在 highcharts 中使用 columnrange 图表类型。

但是上面link的结果和我的要求不一样。如您所见，上面的结果 link:

任何人都可以帮助我知道在这种情况下如何自定义类别视图以获得第一个屏幕截图中所示的结果。

Answer 1

使用 grouped categories 插件获得那种外观将是一项相当艰巨的任务。

另一种方法是为每组类别（在您的情况下为 GHRM 和 HR 扫描仪）使用单独的 x 轴。

轴可以通过 left 和 top 属性定位，并通过 height 属性调整大小。这些选项尚未记录，但它们有效。它们接受以百分比表示的相对值（例如 30%）和以像素表示的绝对值（例如 200px）。

  xAxis: [{
    categories: ['Category 1'],
    tickWidth: 0,
    height: '30%',
    offset: 0,
    title: {
      text: 'First x axis',
      rotation: 0,
      align: 'high'
    }
  }, {
    categories: ['Category 2', 'Category 3'],
    tickWidth: 0,
    height: '60%',
    top: '40%',
    offset: 0,
    title: {
      align: 'high',
      text: 'Second x axis',
      rotation: 0
    }
  }],

  plotOptions: {
    series: {
      grouping: false,
      groupPadding: 0,
      pointPadding: 0,
      borderWidth: 0
    }
  },

  series: [{
    data: [
      [1, 7]
    ],
  }, {
    data: [
      [2, 4],
      [3, 8]
    ],
    xAxis: 1
  }]

现场演示： http://jsfiddle.net/BlackLabel/s3k3s944/

grouping 必须禁用，以便列始终居中。 pointPadding、groupPadding 和 borederWidth 强制列占据最大垂直范围。

轴配置的所有其他选项可以在 Highcharts API 中找到：https://api.highcharts.com/highcharts/

使用自定义视图在 columnrange highcharts 中对类别进行分组

Group Categories in columnrange highcharts with custom view

javascript

charts

highcharts

angular2-highcharts