javascript - 使用highchart在柱形图中获取一系列的一系列
问题描述
我在这里使用基本柱形图示例:
来自 JSFiddle 通过 HC 文档的 Highchart 示例
这对于单个 xAxis 系列来说很好,但我需要一个带有双重分组的系列,如下所示:
我有以下 HC 脚本代码:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
['Jan', '2020'],
['Feb', '2020']
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [[49.9, 2020], [71.5, 2020]]
}, {
name: 'New York',
data: [[83.6, 2020], [78.8, 2020]]
}]
});
我需要找到一种方法来完成这项工作。我可以使用其他 JS 图表库,如果它们更容易,因为我正在调查其中的一堆。
解决方案
我认为你可以grouped categories highcharts module
在这种情况下使用。
文档:https ://github.com/blacklabel/grouped_categories
Highcharts.chart('container', {
chart: {
type: "column"
},
series: [{
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5].reverse()
}],
xAxis: {
categories: [{
name: "2020",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "2021",
categories: ["Carrot", "Potato", "Tomato"]
}]
}
});
推荐阅读
- azure - 印度中部地区的 Azure 搜索
- javascript - 记录属性不呈现为字符串
- python - 如何与 HTTP 服务器的用户共享 anaconda 包
- bash - 在 bash 脚本中将变量传递给 vim 编辑
- ios - 如何在swift中手动手动调用tableview的cellforrowat?
- swift - 更改选定的单元格图像 uitableview
- visual-studio - 为什么我们不能在非系统驱动器上安装大部分 Visual Studio 2019?
- sql - 如何从提到的查询中获取需要记录
- css - 替换搜索和购物篮图标 shopisle
- python - pyspark 中的分桶和一种热编码