高图表 将向下钻取(三层)重置为初始状态
本文关键字：初始状态 三层 钻取 高图表 | 更新日期: 2023-09-27 18:31:47
我的饼图有一个三重钻取。我正在尝试创建一个按钮，允许您将整个图表重置为原始明细状态。我看了一个旧的实现，它没有深入分析，无法让它与我的解决方案一起工作（请参阅此处将Highcharts重置为初始状态）。
我当前的 JSFiddle 具有我尝试使用该线程复制的内容。你可以在这里看到：http：//jsfiddle.net/vsFLK/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<div id="pieContainer"></div>
<br/>
<a id="resetChart" href="#">Reset</a>
var chart;
$(document).ready(function () {
/*begin pie chart render*/
var colors = Highcharts.getOptions().colors,
categories = ['A', 'B', 'C'],
level = 0,
//name = 'Regions',
data = [{
name: 'B',
y: 10,
color: colors[0],
drilldown: {
level: 1,
name: 'A',
color: colors[0],
data: [{
y: 7,
name: 'A',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300],
['4', 400],
['5', 500],
['6', 600],
['7', 700]
]
}
}, {
y: 3,
name: 'B',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300]
]
}
}]
}
}, {
name: 'C',
y: 34,
color: colors[1],
drilldown: {
level: 1,
name: 'C',
color: colors[1],
data: [{
y: 1,
name: 'A',
drilldown: {
level: 2,
data: [
['1', 100]
]
}
}, {
y: 7,
name: 'B',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300],
['4', 400],
['5', 500],
['6', 600],
['7', 700]
]
}
}, {
y: 9,
name: 'C',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300],
['4', 400],
['5', 500],
['6', 600],
['7', 700]
]
}
}, {
y: 3,
name: 'D',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300]
]
}
}, {
y: 3,
name: 'E',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300], ]
}
}, {
y: 2,
name: 'F',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300], ]
}
}, {
y: 2,
name: 'G',
drilldown: {
level: 2,
data: [
['1', 300],
['2', 200],
['3', 100]
]
}
}, {
y: 3,
name: 'H',
drilldown: {
level: 2,
data: [
['1', 300],
['2', 200],
['3', 100]
]
}
}, {
y: 4,
name: 'I',
drilldown: {
level: 2,
data: [
['1', 300],
['2', 200],
['3', 100]
]
}
}]
}
}, {
name: 'A',
y: 50,
color: colors[2],
drilldown: {
level: 1,
name: 'A',
color: colors[2],
data: [{
y: 2,
name: 'A',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200]
]
}
}, {
y: 1,
name: 'C',
drilldown: {
level: 2,
data: [
['1', 100]
]
}
}, {
y: 53,
name: 'A',
drilldown: {
level: 2,
data: [
['1', 100],
['2', 200],
['3', 300],
['4', 400],
['5', 500],
['6', 600],
['7', 700]
]
}
}]
}
}]
function setChart(name, categories, data, color) {
//chart.xAxis[0].setCategories(categories);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
color: color || 'white'
});
}
pieChart = new Highcharts.Chart({
chart: {
renderTo: 'pieContainer',
type: 'pie',
/* changes bar size */
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 10,
shadow: false,
backgroundColor: '#ffffff'
},
title: {
text: ''
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total Brand Value',
categories: categories
}
},
//drilldown plot
plotOptions: {
pie: {
cursor: 'pointer',
allowPointSelect: false,
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
point: {
events: {
click: function () {
var chart = this.series.chart,
drilldown = this.drilldown;
if (drilldown) { // drill down
chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
} else { // restore
chart.setChart(name, categories, data, null, level);
}
}
}
},
dataLabels: {
enabled: true,
color: '#000',
//label colors
connectorColor: '#000',
// connector label colors
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y, 0);
}
}
}
},
//formatting over hover tooltip
tooltip: {
backgroundColor: '#383838',
formatter: function () {
var point = this.point,
s = '';
switch (this.series.options.level) {
case 0:
s = point.name + ':<b>' + Highcharts.numberFormat(this.y, 0) + ' brands</b><br/>';
s += 'Click to view drilldown 1';
break;
case 1:
s = point.name + ':<b>' + Highcharts.numberFormat(this.y, 0) + ' brands</b><br/>';
s += 'Click to drilldown 2';
break;
case 2:
s = point.name + ':<b>' + Highcharts.numberFormat(this.y, 0) + ' ($m) brand value</b><br/>';
s += 'Click to drilldown 3';
break;
}
return s;
}
},
credits: {
enabled: false
},
series: [{
name: name,
data: data,
level: level,
/* changes bar size */
shadow: false,
color: 'black' //Sectors icon
}],
exporting: {
enabled: false
}
},
/*Remember to rename chart functions for pie chart so it is unique from bar*/
function (chart) {
chart.upper = [];
var up = false;
chart.setChart = function (name, categories, data, color, level) {
//chart.xAxis[0].setCategories(categories);
if (name === true && chart.upper.length) {
}
if (up === false) {
//chart.toolbar.add('up', 'Level up', 'Level up', function(){ chart.setChart(true); });
up = true;
}
chart.upper.push(chart.series[0].options);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
level: level,
color: color || 'white'
});
}
})
});
function drawDefaultChart() {
pieChart = new Highcharts.Chart();
}
$(function () {
$(document).ready(function () {
drawDefaultChart();
});
$('#resetChart').on("click", function (e) {
e.preventDefault();
pieChart = new Highcharts.Chart();
});
})
无论如何，无论您处于哪个级别，我都可以让一个按钮将整个图表重置为初始钻取？
首先，为什么要创建两次图表？删除额外的代码后，您可以使用简单的chart.setChart()函数，如下所示： // restore - 这意味着完全可以根据需要恢复图表。
请参阅示例：http://jsfiddle.net/vsFLK/2/
目前您可以重复使用drillUp方法：
document.getElementById('drillUp').addEventListener('click', function(){
chart.drillUp();
if(chart.series[0].name !== "someName"){
chart.drillUp();
}
});
现场演示：https://jsfiddle.net/BlackLabel/0ju31xb8/
API 参考：https://api.highcharts.com/class-reference/Highcharts.Chart#drillUp