[在高图表中使用pointPlacement
时,当数据大于1时,它可以正常工作,但是当从服务器中获取一个数据时,所有柱形都压缩为一个柱形。
对不起,我的英语不好
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>
这是此处报告的Highcharts错误:https://github.com/highcharts/highcharts/issues/11800
作为解决方法,您可以设置pointRange: 1
:
plotOptions: {
column: {
pointRange: 1,
...
}
}
实时演示: http://jsfiddle.net/BlackLabel/Lzx3shrn/
API参考: https://api.highcharts.com/highcharts/series.column.pointRange