Highcharts Stacked развертка с n-уровнями
Я пытаюсь составить столбчатую диаграмму вместе с детализацией, но API высоких диаграмм не поддерживает ее на данный момент. Сделали немного, но это не работает должным образом. http://jsfiddle.net/souranil/T6ryr/.
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 ответ
Вы можете использовать функцию детализации из Highcharts.
В настоящий момент проблема возникает только в сгруппированных и сложенных столбцах. Простая укладка или группировка работают отлично, смотрите:
Связано bug report