我使用highcharts绘制柱形图
我有一个包含多个系列的柱形图
这是我的代码:
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get("rgb")]
]
};
});
chart = new Highcharts.Chart({
chart: {
renderTo: "container"
},
title: {
text: "نمودار کلی عملکرد داوطلب",
style:
{
direction: "rtl",
fontSize: "16px"
}
},
yAxis: {
min: -33.3,
max: 100,
startOnTick: false,
title: {
enabled: true,
text: "درصد"
}
},
xAxis: {
categories: [' . implode(",", $chartCats) . ']
},
tooltip: {
formatter: function() {
return this.series.name+"<br/>% "+this.point.y+"<br/>";
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
pointWidth: 20
},
series: {
animation: {
duration: 3000
}
}
},
credits: {
enabled: false
},
series:
[' . $chartData . ']
});
});
});
如何将所有相同颜色的列放在一起?
例如:所有蓝色列彼此相邻,然后所有红色列彼此相邻
答案 0 :(得分:1)
一般情况下,不支持此类内容,但您可以将数据拆分为不同的数组,因为每列都是一个系列,只链接到“master”,请参阅:http://jsfiddle.net/CVvjZ/
当然这有局限性,因为您需要预先计算x:
的值 xAxis: {
min: 0,
startOnTick: true,
max: 1,
endOnTick: true,
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
grouping: false,
pointWidth: 20
}
},
series: [{
color: colors[0],
name: 'Tokyo',
id: 'tokyo',
data: [[0.3, 15]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[0, 10]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[-0.3, 10]]
},{
color: colors[1],
name: 'Osaka',
id: 'osaka',
data: [[1.3, 15]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[1, 10]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[0.7, 10]]
}]
还有第二种解决方案,更容易使用堆叠选项而不是计算值:http://jsfiddle.net/CVvjZ/1/
代码:
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
color: colors[0],
stack: 1,
name: 'Tokyo',
id: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 2,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 3,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [11]
},{
color: colors[1],
stack: 1,
name: 'Osaka',
id: 'osaka',
data: [[1,12]]
}, {
color: colors[1],
stack: 2,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,13]]
}, {
color: colors[1],
stack: 3,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,14]]
}]