javascript - highchart中的分段标记
问题描述
我正在使用此 Highchart制作具有多个 y 轴的图表,但在为 x 轴制作多个标签时我被卡住了。目前我达到了这个
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Week Comparison'
},
subtitle: {
text: 'Values: Wastage and OEE'
},
xAxis: [{
categories: days.reverse(),
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}%',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'OEE',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Waste',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'OEE',
type: 'column',
yAxis: 1,
data: oee.reverse(),
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Waste',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5],
tooltip: {
valueSuffix: ' %'
}
}]
});
当前输出是我动态操纵 x 和 y 轴的地方。
现在我想在下面的 3 个值块中添加关于 x 轴值的部分是相关图(不是实际的)
我不擅长 JS,谁能帮我弄清楚是否可以在像上图这样的部分打印 x 轴。您的帮助将极大地推动我解决这个问题。另外,如果任何其他图书馆可以做到这一点?你可以提到它的链接。
解决方案
您可以使用“grouped-categories.js”插件。
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]
}
推荐阅读
- java - android RecycleView 如何更快地加载内容?
- javascript - JS根据数据动态对齐每一列
- python - 使用不和谐机器人将多行字符串作为消息发送时出现布局错误
- java - 使用来自 java 的命令启动 powershell 窗口
- automapper - Automapper 忽略反向地图上的目的地属性
- azure - 从 Azure DevOps 服务中的发布管道向人员部署发布
- android - 将 Paging 3 与 SeekBar 一起使用
- javascript - vue - 使用 vue-cli 生成的 webpack 或手动生成的 webpack 有什么区别
- git - 如何在主目录和子目录中初始化 git?
- vba - Word开始使用宏/VBA时如何检查所有的全局模板?