有没有办法让柱形图有两个不同的比例。我玩过highcharts的例子但结果仍不完美:https://jsfiddle.net/dfq4b6xz/
问题是列不在每个部分的中心
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'cat1',
'cat2',
'cat3'
]
},
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, 73],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [null,null, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [null,null, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
});
答案 0 :(得分:2)
这是由为系列设置不同的pointPlacement
引起的。我建议对该选项使用默认设置:http://jsfiddle.net/dfq4b6xz/1/
答案 1 :(得分:1)
您特别告诉图表使用pointPlacement属性以这种方式放置点:
pointPlacement: 0.2
和
pointPlacement: -0.2
完全删除这些行,它应该按原样运行:
[[编辑 - Pawel在我输入答案时回答了......同样的解决方案......]]