我必须使用在列和 Y 轴之间有 1px 空间的 highcharts 做一个柱形图,我怎样才能将我想要的图表中的 1px 空间添加到我做的图表中,这些是我做的代码: (抱歉,我没有足够的声誉来添加图片,这就是我当时没有发布的原因)
var data = [ 20, 29, 25, 29, 21, 17, 20, 19, 18];
createMeasuresGraph(data, "quintals-sugar-graph");
function createMeasuresGraph(data, container) {
data[0] = { color: '#55B647', y: data[0] };
data[data.length -2 ] = { color: '#F15B49', y: data[data.length -2 ] };
var chart = new Highcharts.Chart({
chart: {
marginBottom: 1,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
renderTo: container,
type: 'column',
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointWidth: 5,
},
series: {
borderWidth: .1,
}
},
series: [{
data: data,
color: '#95D2F3',
shadow: false,
}],
title: {
text: ''
},
tooltip: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
enabled: false
},
lineColor: '#CBCBCB',
tickWidth: 0
},
yAxis: {
endOnTick: false,
gridLineWidth: 0,
labels: {
enabled: false
},
startOnTick: false,
minPadding: 0.5,
title: {
text: ""
}
}
});
}
我还看到所有列之间的空间都不相同,也许我使用了错误的 aproch 来获取空间,最好是什么?
最佳答案
你想要每列之间有 1px 的空间吗?
我会根据绘图的大小/列数计算列宽:
var colWidth = ($('#quintals-sugar-graph').width() / data.length) + 1;
然后将“borderWidth”设置为 1px 以提供空间:
plotOptions: {
column: {
pointWidth: colWidth,
borderWidth: 1
},
},
fiddle here .
关于javascript - 我如何在 Highchart 中使列和 y 轴之间有 1px 的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12250587/