0
드릴 다운과 함께 컬럼 스택 차트를 만들려고하지만 highcharts API는 현재 지원하지 않습니다. 조금만 해봤지만 제대로 작동하지 않습니다. http://jsfiddle.net/souranil/T6ryr/.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 레이블을 클릭하면 다음 레벨의 데이터가있는 세로 막 대형 차트로 드릴 다운해야합니다 (드릴 다운이 더 이상 표시되지 않으면 다시 누적 기둥 형 차트가 표시됨).
- 스택 요소를 클릭하면 중첩 데이터가 들어있는 일반 세로 막 대형 차트로 드릴 다운해야합니다.
누구나 아직 완료 했습니까?
bug report를 연결 라벨에 2/뒤로 버튼을 드릴 다운 할 때 "things2"로 잘못된 레이블이있는 경우 시리즈 이름 중 하나가 아닌 다른 것으로 설정할 방법이없는 것 같습니다 – tishu마스터 분기가 끊어져서 데모가 작동하지 않습니다. 대신 공식 릴리즈를 사용하십시오 : http://jsfiddle.net/WCCDZ/381/ [drillUpText] (http://api.highcharts.com/highcharts/ligh.drillUpText)를 사용하여 레이블을 변경할 수 있습니다. –