所以我有20个系列数据，我不知道如何计算位置和填充并使其工作。这是jsFiddle链接
$(function () {
$('#container').highcharts({
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, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
pointPadding: 0.3,
pointPlacement: 0.2,
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
pointPadding: 0.4,
pointPlacement: 0.2,
},{
name: 'Employees1',
color: 'rgba(125,110,217,1)',
data: [140, 43, 70],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized1',
color: 'rgba(126,186,134,.9)',
data: [130, 40, 10],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit1',
color: 'rgba(148,161,163,1)',
data: [83.6, 148.8, 98.5],
pointPadding: 0.3,
pointPlacement: 0.2,
}, {
name: 'Profit Optimized1',
color: 'rgba(186,50,67,.9)',
data: [213.6, 148.8, 208.5],
pointPadding: 0.4,
pointPlacement: 0.2,
},{
name: 'Employees2',
color: 'rgba(165,170,117,1)',
data: [170, 33, 30],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized2',
color: 'rgba(146,86,114,.9)',
data: [120, 30, 60],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit2',
color: 'rgba(248,121,61,1)',
data: [123.6, 278.8, 128.5],
pointPadding: 0.3,
pointPlacement: 0.2,
}, {
name: 'Profit Optimized2',
color: 'rgba(126,40,21,.9)',
data: [213.6, 298.8, 198.5],
pointPadding: 0.4,
pointPlacement: 0.2,
},{
name: 'Employees3',
color: 'rgba(164,120,117,1)',
data: [120, 93, 30],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized3',
color: 'rgba(116,86,114,.9)',
data: [150, 80, 20],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit3',
color: 'rgba(148,191,163,1)',
data: [143.6, 158.8, 298.5],
pointPadding: 0.3,
pointPlacement: 0.2,
}, {
name: 'Profit Optimized3',
color: 'rgba(146,160,161,.9)',
data: [243.6, 118.8, 218.5],
pointPadding: 0.4,
pointPlacement: 0.2,
},{
name: 'Employees4',
color: 'rgba(185,120,207,1)',
data: [190, 173, 120],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized4',
color: 'rgba(156,186,124,.9)',
data: [110, 45, 183],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit4',
color: 'rgba(218,161,163,1)',
data: [143.6, 218.8, 238.5],
pointPadding: 0.3,
pointPlacement: 0.2,
}, {
name: 'Profit Optimized4',
color: 'rgba(126,60,51,.9)',
data: [253.6, 118.8, 258.5],
pointPadding: 0.4,
pointPlacement: 0.2,
}]
});
});
感谢您的帮助
答案 0 :(得分：1)
这是工作小提琴
'http://jsfiddle.net/5znwjwek/1/'
由于
答案 1 :(得分：0)
看看这段代码它可能会对你有所帮助。
要减小条的宽度，您必须增加 pointPadding 的值，并使用 pointPlacement 维持条之间的距离。
$(function () {
$('#container').highcharts({
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, 73, 20],
pointPadding: 0.5,
pointPlacement: -0.1
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.5,
pointPlacement: -0.12
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
pointPadding: 0.5,
pointPlacement: -0.14
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
pointPadding: 0.5,
pointPlacement: -0.16
},{
name: 'Employees1',
color: 'rgba(125,110,217,1)',
data: [140, 43, 70],
pointPadding: 0.5,
pointPlacement: -0.18
}, {
name: 'Employees Optimized1',
color: 'rgba(126,186,134,.9)',
data: [130, 40, 10],
pointPadding: 0.5,
pointPlacement: -0.2
}, {
name: 'Profit1',
color: 'rgba(148,161,163,1)',
data: [83.6, 148.8, 98.5],
pointPadding: 0.5,
pointPlacement: -0.22
}, {
name: 'Profit Optimized1',
color: 'rgba(186,50,67,.9)',
data: [213.6, 148.8, 208.5],
pointPadding: 0.5,
pointPlacement: -0.24
},{
name: 'Employees2',
color: 'rgba(165,170,117,1)',
data: [170, 33, 30],
pointPadding: 0.5,
pointPlacement: -0.26
}, {
name: 'Employees Optimized2',
color: 'rgba(146,86,114,.9)',
data: [120, 30, 60],
pointPadding: 0.5,
pointPlacement: -0.28
}, {
name: 'Profit2',
color: 'rgba(248,121,61,1)',
data: [123.6, 278.8, 128.5],
pointPadding: 0.5,
pointPlacement: -0.30
}, {
name: 'Profit Optimized2',
color: 'rgba(126,40,21,.9)',
data: [213.6, 298.8, 198.5],
pointPadding: 0.5,
pointPlacement: -0.32
},{
name: 'Employees3',
color: 'rgba(164,120,117,1)',
data: [120, 93, 30],
pointPadding: 0.5,
pointPlacement: -0.34
}, {
name: 'Employees Optimized3',
color: 'rgba(116,86,114,.9)',
data: [150, 80, 20],
pointPadding: 0.5,
pointPlacement: -0.36
}, {
name: 'Profit3',
color: 'rgba(148,191,163,1)',
data: [143.6, 158.8, 298.5],
pointPadding: 0.5,
pointPlacement: -0.38
}, {
name: 'Profit Optimized3',
color: 'rgba(146,160,161,.9)',
data: [243.6, 118.8, 218.5],
pointPadding: 0.5,
pointPlacement: -0.40
},{
name: 'Employees4',
color: 'rgba(185,120,207,1)',
data: [190, 173, 120],
pointPadding: 0.5,
pointPlacement: -0.42
}, {
name: 'Employees Optimized4',
color: 'rgba(156,186,124,.9)',
data: [110, 45, 183],
pointPadding: 0.5,
pointPlacement: -0.44
}, {
name: 'Profit4',
color: 'rgba(218,161,163,1)',
data: [143.6, 218.8, 238.5],
pointPadding: 0.5,
pointPlacement: -0.46
}, {
name: 'Profit Optimized4',
color: 'rgba(126,60,51,.9)',
data: [253.6, 118.8, 258.5],
pointPadding: 0.5,
pointPlacement: -0.48
}]
});
});