我正在使用 highcharts.js 构建条形图,有时会有数百个数据点(条)。如何删除 highcharts.js 放置在每个栏上的白色填充?看看这个fiddle看看我正在谈论的现象。我试过在系列对象中设置 groupPadding: 0
但条形之间仍然有一些填充/边距。还有什么我可以做的吗?也许 highcharts.js 是这种类型情节的错误库?欢迎提出任何建议,谢谢!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: dates ,
crosshair: true,
crosshair: true,
minTickInterval: 24
},
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: ticks,
groupPadding: 0
}]
});
});
最佳答案
在这里找到答案:http://www.highcharts.com/docs/chart-and-series-types/column-chart
上面的文档展示了如何将所有间距归零,我已经对你的 fiddle 做了这个,所以现在没有间隙了。要更新的代码是您的 plotOptions 调用并保持您的 stacking: 'percent' 调用:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false,
stacking: 'percent'
}
}
对于任何服务,请始终查看他们的文档,他们很可能已经处理了您能想到的大多数问题。通常。 :)
关于javascript - 从条形图中删除填充 Highcharts.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40270490/