使用自定义视图将类别分组在列范围 highcharts 中

wpcxdonn  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(172)

我使用的是Angular 为4的高视力表。
我想创建一个图表来显示这样的结果:

其中:

  • GHRM和HR扫描仪是应用程序名称。
  • 我们将按组显示一些数据(此处按应用程序显示)

为了达到上述效果,我尝试在highcharts中使用columnrange图表类型。
但是上面链接的结果和我的要求不一样,你可以看到上面链接的结果:

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

3bygqnnd

3bygqnnd1#

获得这种外观与分组类别插件将是一个相当困难的任务来完成。
另一种方法是为每组类别使用单独的x轴(在您的情况下为GHRM和HR Scanner)。
轴可以通过lefttop属性定位,通过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,以使列始终居中。pointPaddinggroupPaddingborederWidth强制列占据最大垂直范围。
轴配置的所有其他选项可在Highcharts API中找到:https://api.highcharts.com/highcharts/

相关问题