如何删除HighCharts条形图中条形图之间的空格?
我想用海图做一个简单的条形图 我想把栅栏之间的空隙去掉。我的研究使我相信如何删除HighCharts条形图中条形图之间的空格?,highcharts,bar-chart,react-highcharts,Highcharts,Bar Chart,React Highcharts,我想用海图做一个简单的条形图 我想把栅栏之间的空隙去掉。我的研究使我相信groundPadding和pointPadding属性是造成这个空间的原因。但是将两者设置为0并没有改变任何事情 const config = { chart: { type: 'bar', spacingTop: 0, spacingRight: 0, spacingBottom: 0, spacingLeft: 0,
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
将位于条内,而不是系列
plotOptions: {
bar: {
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
}
}
},
您的代码有错误。您设置了groundPadding
,而不是groupPadding
。此外,如果使用点填充
和组填充
,则在它们之前设置点宽度
将不会生效,因为点宽度
是基于这两个参数计算的。如果要为所有点设置一个宽度,请仅设置pointWidth
属性。至于每次添加另一个点时增加图表的高度,您可以使用chart.setSize
功能检查加载事件的点数并适当更改图表大小。看看下面的例子
API参考:
示例:
我试过了,但没用。你认为这是因为包裹它的div的尺寸吗?(如果是这样的话,我添加了一个编辑)添加实时示例或编辑我的示例以显示您面临的错误此处进行了演示:我认为错误是由于pointWidth:20,
串联打印选项造成的。删除它,它就会工作。我看到了演示,但我试图实现的是,无论我在xAxis上有多少个类别,都要设置一个栏宽。图表的高度会变长,这取决于我有多少条线。我该怎么做?