在 Angular 8 中每次单击时仅显示三个级别的 highchart Sunburst
Show only three levels of highchart Sunburst always on each click in Angular8
我想创建一个始终一次显示三个级别的旭日高图。例如,它有 5 个级别,但不想一开始就显示所有级别。例如首先显示三个第一级。单击第 3 级显示第 2、3 和 4 级。单击第 4 级显示第 3、4、5 级。
这是我在 AngularV8 中实现的代码:
.html 文件
<div class="kt-widget14__chart" style="min-height:300px;">
<div class="chartjs-size-monitor-new">
<highcharts-chart [Highcharts]="highcharts" [options]="company360SunburstOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
</div>
.ts 文件
this.myService.getData().subscribe(result => {
this.chartOptions.series[0].data = result;
this.chartOptions.series[0].point = {
events: {
click: (function (event) {
that.poinClicked(data);
})
}
};
});
chartOptions = {
chart: {
type: "sunburst",
height: '100%',
},
credits: {
enabled: false
},
exporting: { enabled: false },
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
series: { // or general options: "series: { ... }"
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
},
enabled: true,
style: {
textShadow: false
}
},
animation: false
}
},
series: [{
type: "sunburst",
data: [],
allowDrillToNode: true,
cursor: 'pointer',
point: {},
levels: [{
level: 1,
levelSize: {
units: 'percentage',
},
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 2,
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 3,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}, {
level: 4,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}]
}],
tooltip: {
enabled: false
}
};
pointClicked() {
let level = data['Level'];
level = level + 1;
if (level == 1) {
this.sunburstShowLevels([1,2])
} else if (level == 2) {
this.sunburstShowLevels([1,2,3])
} else if (level == 3) {
this.sunburstShowLevels([2,3,4])
}
}
sunburstShowLevels(levelIdList) {
// Will get a list of levelIds that should be display
let levels = this.chartOptions.series[0].levels; // Whole levels object
let newLevels = [];
for (var index=0; index<levels.length; index++) {
var level = levels[index];
if (levelIdList.includes(level['level'])) {
// Then show it
level.hidden = false; // set flag
level['levelSize'] = {value: 1};
level['dataLabels'] = {enabled: true}
} else {
level.hidden = true; // set flag
level['levelSize'] = {value: 0};
level['dataLabels'] = {enabled: false}
}
newLevels.push(level);
}
}
此代码将根据我选择的级别显示我想要的级别。它几乎正在工作。但问题是,当我点击一个级别时,我需要点击两次才能使其生效。
例如,当我点击第二层时,它首先完全显示第 2 层,然后当我再次点击时,它会显示我想要的水平:1,2 和 3。
问题
总而言之,我只想在点击每个级别时显示特定级别。这是我实施的解决方案,问题是在我点击它后它没有立即触发。我需要单击两次才能使其正常工作。有什么想法吗?
或者如果有人有更好的解决方案,我将不胜感激。
提前致谢。
我有另一个想法如何通过使用 series.update 功能来更新级别选项来实现它。
演示:https://jsfiddle.net/BlackLabel/zrt4m13g/
代码:
point: {
events: {
click(e) {
let series = this.series,
clickedLevel = this.node.level,
currentOptions = series.userOptions.levels;
for (let i of currentOptions) {
if (clickedLevel !== 0 /*or 1 */ && clickedLevel !== currentOptions.length) {
if (i.level === clickedLevel || i.level === clickedLevel + 1 || i.level === clickedLevel - 1) {
i.levelSize = {
value: 1
}
} else {
i.levelSize = {
value: 0
}
}
i.dataLabels = {
rotationMode: 'parallel',
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
enabled: true
}
}
}
series.update({
levels: currentOptions
})
}
}
},
API: https://api.highcharts.com/highcharts/series.sunburst.levelSize
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
我想创建一个始终一次显示三个级别的旭日高图。例如,它有 5 个级别,但不想一开始就显示所有级别。例如首先显示三个第一级。单击第 3 级显示第 2、3 和 4 级。单击第 4 级显示第 3、4、5 级。
这是我在 AngularV8 中实现的代码:
.html 文件
<div class="kt-widget14__chart" style="min-height:300px;">
<div class="chartjs-size-monitor-new">
<highcharts-chart [Highcharts]="highcharts" [options]="company360SunburstOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
</div>
.ts 文件
this.myService.getData().subscribe(result => {
this.chartOptions.series[0].data = result;
this.chartOptions.series[0].point = {
events: {
click: (function (event) {
that.poinClicked(data);
})
}
};
});
chartOptions = {
chart: {
type: "sunburst",
height: '100%',
},
credits: {
enabled: false
},
exporting: { enabled: false },
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
series: { // or general options: "series: { ... }"
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
},
enabled: true,
style: {
textShadow: false
}
},
animation: false
}
},
series: [{
type: "sunburst",
data: [],
allowDrillToNode: true,
cursor: 'pointer',
point: {},
levels: [{
level: 1,
levelSize: {
units: 'percentage',
},
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 2,
hidden: false,
dataLabels: {
enabled: true
}
}, {
level: 3,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}, {
level: 4,
hidden: true,
dataLabels: {
enabled: false
},
levelSize: {
value: 0
}
}]
}],
tooltip: {
enabled: false
}
};
pointClicked() {
let level = data['Level'];
level = level + 1;
if (level == 1) {
this.sunburstShowLevels([1,2])
} else if (level == 2) {
this.sunburstShowLevels([1,2,3])
} else if (level == 3) {
this.sunburstShowLevels([2,3,4])
}
}
sunburstShowLevels(levelIdList) {
// Will get a list of levelIds that should be display
let levels = this.chartOptions.series[0].levels; // Whole levels object
let newLevels = [];
for (var index=0; index<levels.length; index++) {
var level = levels[index];
if (levelIdList.includes(level['level'])) {
// Then show it
level.hidden = false; // set flag
level['levelSize'] = {value: 1};
level['dataLabels'] = {enabled: true}
} else {
level.hidden = true; // set flag
level['levelSize'] = {value: 0};
level['dataLabels'] = {enabled: false}
}
newLevels.push(level);
}
}
此代码将根据我选择的级别显示我想要的级别。它几乎正在工作。但问题是,当我点击一个级别时,我需要点击两次才能使其生效。
例如,当我点击第二层时,它首先完全显示第 2 层,然后当我再次点击时,它会显示我想要的水平:1,2 和 3。
问题
总而言之,我只想在点击每个级别时显示特定级别。这是我实施的解决方案,问题是在我点击它后它没有立即触发。我需要单击两次才能使其正常工作。有什么想法吗?
或者如果有人有更好的解决方案,我将不胜感激。
提前致谢。
我有另一个想法如何通过使用 series.update 功能来更新级别选项来实现它。
演示:https://jsfiddle.net/BlackLabel/zrt4m13g/
代码:
point: {
events: {
click(e) {
let series = this.series,
clickedLevel = this.node.level,
currentOptions = series.userOptions.levels;
for (let i of currentOptions) {
if (clickedLevel !== 0 /*or 1 */ && clickedLevel !== currentOptions.length) {
if (i.level === clickedLevel || i.level === clickedLevel + 1 || i.level === clickedLevel - 1) {
i.levelSize = {
value: 1
}
} else {
i.levelSize = {
value: 0
}
}
i.dataLabels = {
rotationMode: 'parallel',
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
enabled: true
}
}
}
series.update({
levels: currentOptions
})
}
}
},
API: https://api.highcharts.com/highcharts/series.sunburst.levelSize
API: https://api.highcharts.com/class-reference/Highcharts.Series#update