移除条形图Highcharts.js中的填充
Remove padding from barcharts Highcharts.js
我使用highcharts.js来构建条形图,有时有数百个数据点(条形图)。我如何删除白色填充,highcharts.js放在每个酒吧?看看这个小提琴,看看我所说的现象。我试过在系列对象中设置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
上面的文档展示了如何零化所有的间距,我已经对你的小提琴做了这个,所以现在没有间隙。要更新的代码是plotOptions调用,并保持堆栈:'percent'调用:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false,
stacking: 'percent'
}
}
对于任何服务,总是看一下他们的文档,他们很可能已经处理了你能想到的大多数问题。通常。:)
相关文章:
- spine.js在启动时填充模型实例
- Fabric.js-更改矩形填充
- 在EXT窗体面板中填充EXT JS存储
- 使用kendo js填充网格
- 如何在js中实现树结构类型的表单动态填充
- 如何在d3.js中填充svg圆圈内的图像
- 在Angular JS中,预先填充ng中的下拉值repeat
- 在Sails.js中通过关系填充多对多
- 在Angular JS中填充对象以进行插入
- 在 Node.js 中填充来自猫鼬的对象
- JS使用不同的填充
- 意思是.JS中间件中的猫鼬填充不起作用
- 设置图像以使用纸张.js填充画布
- 面积图的条件填充 D3.js
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 在刀片模板中填充js数组
- 用PHP填充JS代码段
- PHP:使用opendir填充JS幻灯片
- 在特定索引中填充JS数组
- 如何在我的谷歌浏览器扩展程序中将信息从后台传递.js到自动填充.js