javascript - 是否可以在 HighChartJS 中创建分组条形图?
问题描述
基本上我希望将相同的分组柱形图(在 JS 小提琴中)显示为分组条形图,我认为将图表类型设置为“条形图”并不能解决问题。是不可能有一个分组的条形图,还是我错过了一些需要更改的其他配置选项?
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' mm'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointPadding: 0
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
pointPadding: 0.1
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
pointPadding: 0.2
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],
pointPadding: 0.3
}]
});
解决方案
请注意,此配置还包括列系列的 plotOptions,您需要将其更改为对条形系列执行相同的操作。
plotOptions: {
bar: {
grouping: false,
shadow: false
}
},
推荐阅读
- amazon-redshift - 我们可以在 Redshift 中使用 CTE(with 子句)进行 UPDATE 查询吗?
- spring-cloud-stream - 如何在消费者中获取消息标头
- linux - u-boot 在“解压缩/加载内核映像”处挂起
- c# - 如何同步读取和写入来自不同任务的 NetworkStream?
- c++ - 如何在文件处理中使用 for 循环获取多个输入?
- r - 在 ggplot 条形图中按组标准化
- matlab - 如何从 Matlab/gramm 中的神经脉冲发射图中绘制置信区间图?
- jenkins - 带有 Tycho 构建的 Jenkins Artifactory 插件
- apache-flink - Flink Operator 字数统计教程:控制台输出在哪里?
- python - 访问类之间的变量