javascript 我怎样才能在 Highchart 中在列和 y 轴之间有 1px 的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12250587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I do in Highchart to have 1px space between the columns and the y Axis?
提问by mkhuete
I have to do a column chart using highcharts that has 1px space between the colums and the Y axis, how can I add the 1px space that is in my desired chart to the chart I did, these is the code I did: (Sorry I don't have the reputation enough to add images that's why I haven't post then)
我必须使用在柱和 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: ""
}
}
});
}
I seeing also that the space between is not the same in all the columns, maybe I'm using a wrong aproch to get the spaces, what would it be best?
我还看到所有列之间的空间都不相同，也许我使用了错误的 aproch 来获取空间，最好是什么？
回答by Mark
You want a 1px space between each column?
你想要每列之间有 1px 的空间吗？
I would calculate the column width based on the size of the plot / number of columns:
我会根据绘图的大小/列数计算列宽：
var colWidth = ($('#quintals-sugar-graph').width() / data.length) + 1;
Then set the "borderWidth" to 1px to provide the space:
然后将“borderWidth”设置为 1px 以提供空间：
plotOptions: {
column: {
pointWidth: colWidth,
borderWidth: 1
},
},
Fiddle here.
在这里摆弄。
回答by ricca
Do you really need the width to be exactly 1px? If not, the following also leave minimum space between columns and would be more convenient:
你真的需要宽度正好是 1px 吗？如果没有，以下内容也会在列之间留出最小空间，这样会更方便：
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0
}
}
回答by Zamith
You can simply do:
你可以简单地做：
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 1
}
},
