0
我想做一個列堆疊圖表一起鑽取，但highcharts API不支持它現在看來。已經做了一些，但沒有正常工作。 http://jsfiddle.net/souranil/T6ryr/。Highcharts堆疊深入與n級
Highcharts.setOptions({
lang: {
FullScreenButtonTitle: "View Larger Chart"
}
});
$(function() {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
name = 'AUM',
data = [{
y: 6.06,
color: '#B7C726',
drilldown: {
categories: ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 7.9, //MA 10
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 11.4, //MA 11
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 11.92, //MA 12
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 10, //MA 13
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}];
data2 = [{
y: 6.85, //OA09
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: '1st quarter',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 7.52, //OA10
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 8.45, //OA11
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 8.57, //OA12
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 33, //OA13
color: '#636466',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.85, 7.52, 8.45],
color: '#74489D'
}, {
name: 'Page3',
data: [6.50, 7.16, 8.11, 0],
color: '#B7C726'
}, {
name: 'Page2',
data: [6.35, 7.01, 8.04, 8.52, 0],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [6.25, 6.85, 4.61, 8.52, 0],
color: '#F3901D'
}]
} // drilldown
}];
function setChart(name, categories, data, color) {
var len = chart.series.length;
chart.yAxis[0].options.stackLabels.enabled = true;
chart.xAxis[0].setCategories(categories);
for (var i = 0; i < len; i++) {
console.log(chart.series.length);
chart.series[0].remove();
}
//console.log('a');
if (data.series) {
for (var i = 0; i < data.series.length; i++) {
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
color: data.series[i].color || 'white',
stacking: 'norma'
});
}
} else {
chart.addSeries({
name: name,
data: data
//color: 'white'
}, {
name: name,
data: data2
//color: 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Nested drilldown'
},
subtitle: {
text: 'Lets see how good highcharts is ...'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Volume',
style: {
color: '#006633'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return this.y;
//return Highcharts.numberFormat(this.total, 2, '.')
/*var i = 0;
if (this.total < 0) {
return '';
} else {
var total = 0;
$.each(this.axis.chart.series, function(j, serie) {
total += serie.options.data[i];
});
i++;
return Highcharts.numberFormat(total, 2, ',');
}*/
} // formatter
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#006633'
}
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.setTitle({
text: this.series.name
})
//chart.yAxis[0].options.tickInterval = 0.5;
chart.yAxis[0].options.stackLabels.enabled = false;
setChart(null, drilldown.categories, drilldown);
} else { // restore
window.location.reload(true);
}
}
}
},
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'normal'
},
formatter: function() {
return this.y + ' ';
},
formatter: function() {
return Highcharts.numberFormat(this.y, 2, '.')
}
}
}
},
tooltip: {
formatter: function() {
/*var i = 0;
if (this.total < 0) {
return '';
} else {
var total = 0;
$.each(this.axis.chart.series, function(j, serie) {
total += serie.options.data[i];
});
i++;
//return stotal;
}*/
var series = this.series.chart.series,
total = 0,
x = this.point.x,
i;
for (i = 0; i < series.length; i++)
total += series[i].data[x].y
//return this.series.name+': '+this.y+'<br/>'+
// 'total: '+ Highcharts.numberFormat(total, 2, '.');
var point = this.point,
s = this.series.name + ' : ' + this.x + ':<b>' + this.y + '($b)</b><br/>';
//s += 'total: '+ Highcharts.numberFormat(total, 2, '.');
if (point.drilldown) {
s += 'Click to view chapters';
} else {
//s += 'Click to return to yearly figures';
s += 'Total: ' + Highcharts.numberFormat(total, 2, '.');
}
if (this.series.type == 'arearange') {
s = this.series.name + ' : ' + this.x + ':<b>' + '20-25($b)</b><br/>';
}
return this.series.name;
}
},
series: [{
type: 'column',
name: 'Chapter1',
data: data,
color: '#B7C726'
}, {
type: 'column',
name: 'Chapter2',
data: data2,
color: '#636466'
}],
exporting: {
enabled: true
},
});
var allseries = chart.series;
});
});
我需要在堆棧元素點擊和xAxis標籤點擊時處理不同的東西。
- 單擊xAxis標籤時，它應該向下鑽取到具有下一級別數據的柱形圖（如果沒有更多的向下鑽孔，則再次顯示疊加柱形圖）。
- 如果單擊堆棧元素，它應鑽取到包含嵌套數據的普通列圖表。
有沒有人做過嗎？
我看到這裏有兩個問題，你必須單擊列不起作用 1 /點擊在標籤上 2 /當向下鑽取後退按鈕的標籤爲「回到東西2」時，似乎無法將其設置爲其他系列名稱之一以外的其他東西 – tishu
由於主分支損壞，因此演示無法正常工作。改爲使用官方版本：http://jsfiddle.net/WCCDZ/381/您可以使用以下標籤更改標籤：[drillUpText]（http://api.highcharts.com/highcharts/lang.drillUpText）。 –