如何将Highcharts标签宽度设置为50%

Question

我有一个带有长标签的Highcharts条形图。我想让它们长到容器宽度的50%。但不管我怎么做，它们都没有长到这个宽度。

这里有一个例子：

https://jsfiddle.net/agex7m0o/1/

Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Africa Long Name Long Name Long Name Long Name Long Name', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels: {
overflow: 'justify'
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});

如您所见，左侧(带标签(的宽度明显比图表侧窄。标签已经在包装，但左侧没有增长。

你知道吗？

Answer 1

您可以通过在图表中添加以下选项来使用边距参数：

chart: {
type: 'bar',
margin: [50,10,50,400]
},

参见示例：此处为

链接到API：这里是

Answer 2

在下面的演示中，图表Y轴宽度设置为常规图表容器宽度的50%。这是你一直在寻找的解决方案吗？

演示：https://jsfiddle.net/BlackLabel/z0vbcf5x/

events: {
render() {
let chart = this;
if (chartForRender) {
chartForRender = false;
chart.update({
chart: {
marginLeft: chart.chartWidth / 2
}
}, true, false, false)
}
chartForRender = true;
}
}

API：https://api.highcharts.com/highcharts/chart.events.render