如何在父图表的相同位置加载hicharts中的向下钻取饼图? Please find the image
var chart;
function BindChart(seriesArr) {
var UNDEFINED;
Highcharts.setOptions({
lang: {
drillUpText: '<< {series.name}'
}
});
Highcharts.chart('topIssueContainer', {
chart: {
type: 'pie',
renderTo: 'container',
height: 180,
marginLeft: 0,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
chart = this;
//alert(e.point.ID);
chart.showLoading('Loading Details ...');
$('#hdntopIssueID').val(e.point.ID);
var dataArr = CallChild(e.point.ID, e);
chart.setTitle({
text: ''
});
//setTimeout(function () {
// chart.hideLoading();
// chart.addSeriesAsDrilldown(e.point, data);
//}, 2000);
}
}
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
format: '{point.name}',//: {point.y:.1f}%
useHTML: true,
}
},
pie: {
dataLabels: {
enabled: false,
useHTML: true,
style: { fontSize: '8px', textDecoration: 'none' },
},
showInLegend:true,
size: 110,
point: {
events: {
click: function () {
if (this.drilldown != true) {
CallGrid($('#hdntopIssueID').val(), this.series.name, this);
}
}
}
}
},
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
//itemmarginRight: 10,
x: -30,
y: 0,
itemStyle: {
fontWeight: 'initial',
fontSize: '10px'
},
symbolRadius: 0
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b> of total<br/>'
},
series: [{
name: 'Top Issues',
colorByPoint: true,
data: seriesArr,
}],
drilldown: {
drillUpButton: {
relativeTo: 'container',
position: {
y: 0,
x: -5
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
}
});
$('#topIssueContainer span').css({ 'text-decoration': 'none' });
}
在CallChild功能中,我只是发布如下数据。但是当钻取发生时,图表是正确的。它应该与父图表在同一个地方。
function CallChild(ID, e) {
var Drilldowndata = [];
var url = path + "GetBucopitalDrilldownview";
var dData = {
"LevelId": ID,
"LevelName": "test",
"Type": "topIssue",
"associateId": associateId,
"color": "red"
};
var Token = sessionStorage.UserToken;
//$("#loaderImage").addClass("in").css({ "display": "block" });
$.ajax({
type: "POST",
url: url,
headers: { "UserToken": Token },
dataType: 'json',
data: dData,
success: function (Result) {
//debugger;
//Result = Result.d;
for (var i in Result) {
var serie = { name: Result[i].LevelName, y: Result[i].FTECount, procCount: Result[i].ProjectCount, LevelId: Result[i].LevelId };
Drilldowndata.push(serie);
}
data = {
name: e.point.name,
data: Drilldowndata
}
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data);
},
error: function (Result) {
alert("Error");
}
})
return Drilldowndata;
}