javascript Highcharts - Bar - 将 X 轴宽度和图表区域宽度设置为常量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18517235/
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
Highcharts - Bar - Setting the X axis width and the chart area width to be constant
提问by Joel
Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?
任何人都可以推荐一种将 X 轴设置为跨条形图多个实例的恒定宽度的方法吗？
See this jsFiddle: http://jsfiddle.net/LCYwW/1/
看到这个jsFiddle：http: //jsfiddle.net/LCYwW/1/
The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.
第一个图表是将 2 个位置的数据放置在单个图表中的示例。在这种情况下，Highcharts 会自动调整 X 轴宽度以容纳两个位置标签。
However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.
但是，我需要将这 2 个位置分开到单独的图表中，但保持两个图表的 X 轴与条形区域宽度的比例相同。请参见示例中的图表 2 和 3。在这种情况下，Highcharts 选择仅适合单个位置的 X 轴宽度，并且两个图表在堆叠时不会对齐。
Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/
有没有办法让各个图表保持彼此相同的比例？我尝试设置 xAxis.labels.style.width 属性，它做了一些事情，但似乎不是一个具体的宽度。见http://jsfiddle.net/LCYwW/3/
This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:
这个例子最容易在 jsFiddle 中看到，但 SO 要求我发布代码：
$('#containerAll').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Short Name', 'Much Longer Location Name']
}
});
$('#container1').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}]
}
],
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: 200
}
}
}
});
$('#container2').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Much Longer Location Name'],
labels: {
style: {
width: 200
}
}
}
});
回答by Barbara Laird
You have a lot more control over the labels if you turn on useHTML.
如果您打开 useHTML，您可以更好地控制标签。
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: '100px',
'min-width': '100px'
},
useHTML : true
}
}
You'll also probably have to set a min and max for the yAxis to keep the data in proportion.
您可能还必须为 yAxis 设置最小值和最大值以保持数据成比例。
Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/
摆弄 yAxis 最大值集：http: //jsfiddle.net/LCYwW/6/
回答by BurninLeo
Also consider, using the chart: marginLeftproperty to set a fixed width for the labels:
还可以考虑使用chart: marginLeft属性为标签设置固定宽度：
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 160
},
// ...
})
});
This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.
这保留了图表的其他行为，例如标签的对齐。另请参阅此问题。
回答by Jen
Adding the marginLeftproperty inside of chart worked like a charm for me.
marginLeft在图表中添加属性对我来说就像一个魅力。
chart: {
type: 'bar',
marginLeft: 200
}, ...
