Кажется, проблема в следующем:
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.color(color).brighten(-0.3).get('rgb')] // darken
],
};
})
});
По какой-то причине Highchart не поддерживает градиентные цвета в его опциях, и вы устанавливаете эти параметры глобально, поэтому все диаграммы, которые будут использовать эти цвета, не будет заряжать Решение состоит в том, чтобы определить исходные цвета Highchart в переменной (например, originalColors) в начале вашего компонента и в ngOnDestroy, вернуть исходные цвета с помощью функции "Highcharts.getOptions (). Colors = originalColors;", например так:
@Component({
selector: 'app-zones-pie-charts',
templateUrl: './zones-pie-charts.component.html',
styleUrls: ['./zones-pie-charts.component.css']
})
export class ZonesPieChartsComponent implements OnDestroy { // Dont forget to implement OnDestroy
// HIGHCHARTS
Highcharts: typeof Highcharts = Highcharts; // required
chartConstructor = 'chart'; // optional string, defaults to 'chart'
chartOptions: Highcharts.Options[] = []; // required
updateFlag = false; // optional boolean
oneToOneFlag = true; // optional boolean, defaults to false
runOutsideAngular = false; // optional boolean, defaults to false
// FIX
originalColors = Highcharts.getOptions().colors;
//
options: any = [{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enable: false
},
title: {
text: 'Current children by zones'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
connectorColor: 'silver'
},
borderWidth: 0
}
},
series: [{
name: '% Public',
colorByPoint: true,
data: [
{ name: 'Animal 1', y: 4.5 },
{ name: 'Animal 2', y: 5.5 },
{ name: 'Animal 3', y: 11.8 },
{ name: 'Animal 4', y: 12.3 },
{ name: 'Animal 5', y: 1.2 },
{ name: 'Animal 6', y: 8.7 },
{ name: 'Animal 7', y: 9.3 },
{ name: 'Animal 8', y: 15.4 },
{ name: 'Animal 9', y: 10.3 },
{ name: 'Animal 10', y: 20,
sliced: true, selected: true}
]
}]
}];
constructor( ) {
Highcharts.setOptions({
chart: {
style: {
fontFamily: '"Open Sans", sans-serif',
stroke: 0,
},
backgroundColor: '#2d353c'
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
lang: {
downloadCSV: 'Exportar en CSV',
downloadJPEG: 'Exportar en JPEG',
downloadPDF: 'Exportar en PDF',
downloadPNG: 'Exportar en PNG',
downloadSVG: 'Exportar en SVG',
downloadXLS: 'Exportar en XLS',
printChart: 'Imprimir gráfico',
noData: 'No hay datos para visualizar'
},
title: {
style: {
textTransform: 'camelcase',
}
},
subtitle: {
style: {
textTransform: 'camelcase',
}
},
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.color(color).brighten(-0.3).get('rgb')] // darken
],
};
})
});
this.chartOptions.push(this.options[0]);
}
// FIX
ngOnDestroy() {
Highcharts.getOptions().colors = originalColors;
}
//
}
Исправить благодаря этим сообщениям:
https://www.highcharts.com/forum/viewtopic.php?t=37824 https://www.highcharts.com/forum/viewtopic.php?t=36459
Предыдущий ответ
Спасибо, что поделились этим, я думаю, было бы полезно указать, используете ли вы вкладки материалов с реализацией отложенной загрузки или просто обычную.
Ленивая загрузка:
<mat-tab-group >
<mat-tab label="tab1" >
<ng-template matTabContent>
content
</ng-template>
</mat-tab>
<mat-tab label="tab2">
<ng-template matTabContent>
content
</ng-template>
</mat-tab>
</mat-tab-group>
Нормальный:
<mat-tab-group >
<mat-tab label="tab1" >
content
</mat-tab>
<mat-tab label="tab2">
content
</mat-tab>
</mat-tab-group>
Я знаю, что это просто обходной путь, но в случае, если вы используете реализацию с отложенной загрузкой, она может помочь вам перейти к нормальной, пока вы или кто-то найдет решение. Надеюсь, что это поможет;)