highcharts - Highchart - 如何控制系列之间的差距
问题描述
在 Highcharts 中,如何控制类别之间的差距?
我想让我的 highchart 图表差距看起来像左下角的这个 powerpoint 版本。PowerPoint 中的条形图一直延伸到绘图区域的尽头,但高图有这么大的差距。
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Total', 'Male', 'Female', 'Other'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Total',
data: [10, 20, 31, '']
}, {
name: 'Male',
data: [10, 20, 60, 2]
}, {
name: 'Female',
data: [10, 20, 61, '']
}, {
name: 'Other',
data: [10, 20, 65, 4]
}]
});
解决方案
您需要编辑groupPadding
和pointPadding
属性:
plotOptions: {
bar: {
groupPadding: 0.05,
pointPadding: 0
}
}
现场演示: https ://jsfiddle.net/BlackLabel/oqpxmL18/
API参考:
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.pointPadding
推荐阅读
- python-3.x - 在不知道 IP 地址的情况下使用 Python3 在两台本地计算机之间使用 UDP 发送
- google-sheets - 用于条件格式的 Google 表格公式:“如果单元格包含确切的文本文本”则
- pandas - Seaborn Plot-沿轴添加频率
- python-3.x - 如何在 matplotlib 中使用二进制掩码覆盖灰度?
- c# - 敌人跟随 Unity 2d 抖动?
- python - 如何将 PySpark 数据框插入到具有雪花模式的数据库中?
- octobercms - 如何正确发送带有来自 octobercms 的纯文本替代的 Html 邮件?
- c# - 如何阅读 .txt 并计算字数/长度等
- java - @NamedArg 没有字段
- python - 根据另一列 pandas 中字符串的特定字符创建新的数据框列