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

我使用的是角度为4的海图

我想创建一个图表来显示结果，如下所示：

其中：

• GHRM和HR扫描仪是应用程序名称

• 我们展示了一些分组数据（此处为应用程序）

为了达到上述效果，我尝试在highcharts中使用columnrange图表类型

但以上链接的结果与我的要求不同。正如您可以看到上述链接的结果：

---

有谁能帮我了解一下，在这种情况下，我如何定制categories视图，以获得第一个屏幕截图所示的结果。

使用分组类别插件获得这种外观将是一项相当困难的任务

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

轴可以通过

左侧

和

顶部

属性定位，并通过

高度

属性调整大小。这些选项还没有被记录下来，但它们是有效的。它们接受以百分比表示的相对值（例如

30%

）和以像素表示的绝对值（例如

200px

）

现场演示：

必须禁用分组，以便列始终居中

pointPadding

、

groupPadding

和

borederWidth

强制列占据最大垂直范围

---

Axis配置的所有其他选项都可以在Highcharts API中找到：

工作JSFIDLE URL:谢谢kamil kulig我会尝试一下我已经按照您的建议实现了下面是我的URL:正如您在上面的我的解决方案URL文本“Global software catalog”中看到的未正确显示和对齐。您能帮助我如何解决此问题吗？可能是由于使用了不受支持的属性（

宽度

，

高度

，

顶部

，

左侧

）。此演示包含

图表中的代码。呈现强制轴标题对齐的事件：
  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
  }]