HighChartsスタッキングカラムにワイヤを追加
5574 ワード
プロジェクト中にスタッドコールチャート(Stacked column chart)を積む必要がある連線効果の結果、多くのグラフを探してもなく、highchartsを見ても悪くないので、自分で何とか追加しました.オンラインテストアドレス:http://jsfiddle.net/cqzhangkang/LTsku/4/
追加前の効果:
追加後の効果
実装コード:
追加前の効果:
追加後の効果
実装コード:
$(function () {
var defaultColors = ['#058DC7', '#50B432','#DDDF00', '#ED561B', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
Highcharts.setOptions({colors : defaultColors});
/*** **
Highcharts.getOptions().colors = Highcharts.map(defaultColors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
*/
var categoriesArr = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas','hello'];
var data = [{
type: 'column',
name: 'John',
data: [15,5, 3, 4, 7, 2]
}, {
type: 'column',
name: 'Jane',
data: [12,12, 12, 12, 12, 12]
}, {
type: 'column',
name: 'Joe',
data: [19,3, 4, 4, 2, 5]
}, {
type: 'column',
name: 'go',
data: [100,80, 20, 80, 90, 70]
}];
var len = data.length;
var total = [];
for(var i=0;i<categoriesArr.length;i++){
total[i] = 0;
for(var j=0;j<len;j++){
total[i] += data[j].data[i];
}
}
for(var i=len-1;i>=0;i--){
var tmpData = [];
var dd = data[i].data;
for(var j=0;j<dd.length;j++){
if(i == len-1){
tmpData[j] = dd[j]*100/total[j];
}else{
tmpData[j] = dd[j]*100/total[j] + data[len+i + 1].data[j];
}
}
data[len+i] = {
type: 'spline',
name: data[i].name,
data: tmpData,
tooltip : {
pointFormat : ''
},
color: '#E5C16F',
marker: {
symbol : 'circle',
lineColor: '#FFFFFF',
fillColor:'#E5C16F'
//fillColor: Highcharts.getOptions().colors[i]
}
};
if(i == 0){
data[len].visible = false;
}
}
$('#container').highcharts({
chart: {
//type: 'column'
events : {
redraw : function(){
//this.series = data;
}
}
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: categoriesArr
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
credits : {
enabled : false
},
legend : {
borderWidth : 0
},
plotOptions: {
column: {
stacking: 'percent',
showInLegend : true,
events : {
legendItemClick: function(event) {
//alert(" :"+this.name)
event.preventDefault();
}
}
},
spline: {
//stacking: '',
connectNulls : true,
showInLegend : false
}
},
series: data
});
});