我想添加自定义后退按钮，因为它有多个向下钻取多个钻孔系列
我几乎已经实现，但我无法采用当前的系列类别，如果我采用当前的系列类别，我可以实现自定义后退按钮
此外，脚本也越来越多，所以对此代码的自定义后退按钮有什么想法
$(function () {
(function (H) {
//For X-axis labels
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
//console.log("series");
//console.log(series);
console.log("Point = ");
console.log(point);
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label').css({
'text-decoration': 'underline',
'font-weight': 'normal',
'cursor': 'pointer',
'color':'brown'
}).on('click', function (){
//alert('clicked');
//point.doDrilldown();
point.firePointEvent('click')
});
}
}
else if (tickLabel && tickLabel._basicStyle)
{
}
return point;
});
})(Highcharts);
var chart;
$(document).ready(function () {
categories1 = ['Jan', 'Feb'],
name1 = 'Planned Leaves',
data1 = [
{
name:'Jan',
y: 50,
colorByPoint: true,
drilldown: {
name: 'Jan Planned Leaves',
categories: ['Admin', 'HR', 'IT', 'Site Row'],
data: [
{
y:30,
colorByPoint: true,
drilldown :
{
name:'Admin Planned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
},
{
y:40,
colorByPoint: true,
drilldown :
{
name:'HR Planned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
}
],
}
},
{
name:'Feb',
y: 50,
colorByPoint: true,
drilldown: {
name: 'Feb Planned Leaves',
categories: ['Admin', 'HR', 'IT', 'Site Row'],
data: [
{
y:30,
colorByPoint: true,
drilldown :
{
name:'Admin Planned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
},
{
y:40,
colorByPoint: true,
drilldown :
{
name:'HR Planned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
}
],
}
},
];
var colors = Highcharts.getOptions().colors,
categories2 = ['Jan', 'Feb'],
name2 = 'Unplanned Leaves',
data2 = [
{
name:'Jan',
y: 55,
colorByPoint: true,
drilldown: {
name: 'Jan Unplanned Leaves',
categories: ['Admin', 'HR', 'IT', 'Site Row'],
data: [
{
y:30,
colorByPoint: true,
drilldown :
{
name:'Admin Unplanned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
},
{
y:40,
colorByPoint: true,
drilldown :
{
name:'HR Unplanned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
}
],
},
},
{
name:'Feb',
y: 55,
colorByPoint: true,
drilldown: {
name: 'Feb Unplanned Leaves',
categories: ['Admin', 'HR', 'IT', 'Site Row'],
data: [
{
y:30,
colorByPoint: true,
drilldown :
{
name:'Admin Unplanned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
},
{
y:40,
colorByPoint: true,
drilldown :
{
name:'HR Unplanned Leaves',
categories:['Keerthi','Vinith','Rahul'],
data:[5,6,8]
}
}
],
},
},
];
categories3 = ['Jan', 'Feb','mar'],
name3 = 'pnun',
data3 = [
{
name:'Jan',
drilldown: {
name: 'Jan planned Leaves',
categories: ['Admin', 'HR'],
data: [3, 5],
colorByPoint: true,
name1: 'Jan UnPlanned Leaves',
categories1: ['Admin', 'HR'],
data1: [10, 15],
colorByPoint: true,
},
}
];
function backChart(name, cat, data)
{
chart.xAxis[0].setCategories(cat);
while( chart.series.length > 0 ) {
chart.series[0].remove( true );
}
chart.redraw();
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
colorByPoint: true,
}
);
}
}
function setChart(name, categories, data, csname, csdata) {
console.log(name, categories, data);
chart.xAxis[0].setCategories(categories);
while( chart.series.length > 0 ) {
chart.series[0].remove( true );
}
chart.redraw();
$("#test").html("<button >Back</button>");
$("button").click(function( )
{
if(csname=='Planned Leaves' || csname=='Unplanned Leaves')
{
cat=categories3;
}
backChart(csname, cat, csdata);
});
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
colorByPoint: true,
}
);
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 25,
beta: 3,
depth: 90,
viewDistance: 25
}
},
title: {
text: 'Employee Leave Management'
},
subtitle: {
text: 'Click the columns to view breakdown by department. Click again to view by Name Wise.'
},
xAxis: {
categories: categories3,
labels: {
align:'center'
}
},
yAxis: {
title: {
text: 'Employee Leave Days'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
csname=this.series.name;
csdata=this.series.data;
if (drilldown) { // drill down
if(csname=='pnun')
setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data,drilldown.data1],csname,csdata);
else
setChart([drilldown.name], drilldown.categories, [drilldown.data],csname,csdata);
}
else { // restore
setChart(name, categories3, [data1, data2, data3]);
}
}
}
},
dataLabels: {
enabled: true,
colorByPoint: true,
style: {
fontWeight: 'bold'
},
formatter: function () {
return this.y; //+'%';
}
}
}
},
credits:{
enabled:false
},
legend:{
enabled:true,
},
tooltip: {
formatter: function () {
var point = this.point,
series = point.series,
s = 'Learner Responsive 16-18' + '<br/>' + this.x + ' ' + series.name + ' is <b>' + this.y + '</b><br/>';
if (point.drilldown) {
s += 'Click to view <b>' + point.category + ' ' + series.name + ' </b>' + ' by department';
} else {
s += 'Click to return to view by academic year.';
}
return s;
}
},
series: [{
name: name1,
categories:categories1,
data: data1,
colorByPoint: true
},{
name: name2,
data: data2,
categories:categories2,
colorByPoint: true
},
{ name:name3,
data: data3,
visible:false,
categories:categories3,
colorByPoint: true,
showInLegend:false
}
],
},
function (chart) {
console.log(chart);
});
});
});