我正在使用 Angular 为 4 的 highcharts。
我想创建一个图表来显示如下结果:
地点:
GHRM 和 HR Scanner 是应用程序名称。
我们按组显示一些数据(此处为应用程序)
为了实现上述结果,我尝试在 highcharts 中使用 columnrange 图表类型。
但是上面链接的结果与我的要求不同。正如您可以看到上面链接的结果:
任何人都可以帮助我知道如何在这种情况下自定义类别 View 以实现第一个屏幕截图中所示的结果。
最佳答案
使用分组类别插件获得这种外观将是一项相当艰巨的任务。
另一种方法是为每组类别使用单独的 x 轴(在您的情况下为 GHRM 和 HR 扫描仪)。
轴可以通过 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/
必须禁用分组
,以便列始终居中。 pointPadding
、groupPadding
和 borederWidth
强制列占据最大垂直范围。
轴配置的所有其他选项都可以在Highcharts API中找到:https://api.highcharts.com/highcharts/
关于javascript - 使用自定义 View 对列范围 Highcharts 中的类别进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50137720/