使用自定义视图

时间:2018-05-02 14:59:24

标签: javascript charts highcharts angular2-highcharts

大家好,

我正在使用角度为4的高图。

我想创建一个图表来显示结果如下:

enter image description here

其中:

  • GHRM和HR Scanner是应用程序名称。

  • 我们正在分组显示一些数据(这里是应用程序)

为了达到上述效果,我尝试在highcharts中使用columnrange图表类型.Below是URL:

[https://jsfiddle.net/k1dzcrbj/][2]

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

enter image description here

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

先谢谢您的帮助。

1 个答案:

答案 0 :(得分:1)

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

另一种方法是为每组类别使用单独的x轴(在您的情况下为GHRM和HR Scanner)。

可以通过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,以便列始终居中。 pointPaddinggroupPaddingborederWidth强制列占据最大垂直范围。

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