我正在尝试使用 HighCharts 制作一个简单的条形图。
我想删除栏之间的空格。我的研究使我相信属性 groundPadding
和 pointPadding
负责这个空间。但将两者都设置为 0
并没有改变任何东西。
const config = {
chart: {
type: 'bar',
spacingTop: 0,
spacingRight: 0,
spacingBottom: 0,
spacingLeft: 0,
// marginTop: 0,
// marginRight: 0,
// marginBottom: 0,
// marginLeft: 0
},
title: {
text: null
},
legend: {
enabled: false
},
credits: {
text: ''
},
xAxis: {
categories: options.map(option => option.option),
// lineWidth: 0,
// tickWidth: 0,
},
yAxis: {
title: {
enabled: false,
},
gridLineWidth: 0,
tickAmount: 0,
showFirstLabel: false,
showLastLabel: false
},
series: [{
data: options.map(option => option.votes)
}],
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 20,
groundPadding: 0,
pointPadding: 0
}
}
};
有什么想法吗?
编辑:
不确定是否相关,但包裹我的图表的红色 div
是:
<div style={{ width: '100%', height: '100%', margin: 'auto', border: '2px solid red' }}>
<ReactHighCharts config={config}></ReactHighCharts>
</div>
绿色 div
的尺寸为:宽度:350px
和 高度:400px
最佳答案
groundPadding
和 pointPadding
将位于 bar
内部,而不是 series
plotOptions: {
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
}
}
},
关于highcharts - 如何删除 HighCharts 条形图中条形之间的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47439424/