Highcharts:禁用柱形图的顶部间距
Highcharts : Disable top spacing from column graph
我在highchart上遇到了一个问题,我希望我的图占据整个空间,但数据和我的div顶部之间总是有一个空间。
如果我的小提琴:http://jsfiddle.net/w2bz5/35/
这是我的javascript代码:
jQuery(function () {
jQuery('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#3d3d3d',
margin: [0, 0, 0, 0],
width: 100,
height: 100,
},
title: {
text: null,
margin: 0,
floating: true,
verticalAlign: 'bottom',
x: 0,
y: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
yAxis: {
title: {
text: null,
margin: 0
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
tooltip: {
enabled: false
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [1298],
color: '#00FF00',
borderColor: null
}, {
data:[4302],
color: '#FF0000',
borderColor: null
}]
});
});
提前感谢!
Snite
您需要将堆叠设置为百分比,而不是正常。
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: false
}
}
},
文档:高图表文档
正常堆叠假设每列都有不同的值,这意味着你会有不同大小的列——这就是为什么它会在顶部留下空间。将其设置为百分比意味着无论包含哪些值,每列都将具有相同的高度。
顺便说一句,如果您想让它们保持这么小,导出按钮将阻碍图形。您可以将其添加到选项列表中以将其删除。
exporting: {
enabled: false
}
Fiddle Link
您也可以将maxPadding和spacingTop设置为0,然后设置max
值。
http://jsfiddle.net/sbochan/w2bz5/37/
相关文章:
- Highchart Js柱形图堆叠和分组
- HighCharts:3D柱形图在选择时更改边框颜色
- 使用共享工具提示时,单击Highcharts柱形图会返回不正确的序列索引
- 带有背景色的高图表柱形图
- 柱形图中每列的 ng-谷歌图表自定义颜色
- Highcharts将url添加到柱形图
- 如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图
- 为Highcharts中的柱形图设置最小默认范围
- 高位图表堆积柱形图标签问题
- 高位图表不显示柱形图的每日数据
- 高位图堆积柱形图更改图例ItemClick函数
- 融合图表 - 在柱形图2D图表中单击时更改条形的颜色
- 高图表柱形图,柱形中间有其他标签
- 通过 json 更新的 Canvasjs 柱形图不起作用
- 如何在高图表的基本柱形图中隐藏/显示列
- 高图表堆积百分比柱形图可以小于 100% 吗?
- Dojo-簇状柱形图数据标签作为Excel
- 谷歌图表:柱形图,饼图不透明度
- 箱线图和柱形图与Highcharts.js组合在一个图表中
- Highcharts:禁用柱形图的顶部间距