导入热量图后，角高图表模块发生冲突

Question

我正在一个模块中工作，该模块具有一些使用Highcharts的不同组件。在其中之一中，我正在使用treemap，并且正在像这样导入此模块：

import { Component, OnInit, ViewChild, Input, SimpleChanges, OnChanges, OnDestroy } from '@angular/core';
import { ApiService } from 'src/common/services/api.services';
import * as Highcharts from 'highcharts';

import More from 'highcharts/highcharts-more';
import noData from 'highcharts/modules/no-data-to-display';
import Tree from 'highcharts/modules/treemap';
import { Subscription } from 'rxjs';

// highcharts
noData(Highcharts);
More(Highcharts);
noData(Highcharts);
Tree(Highcharts);


@Component({
    selector: 'app-performance-tree-map',
    templateUrl: './performance-tree-map.component.html',
    styleUrls: ['./performance-tree-map.component.scss']
})
export class PerformanceTreeMapComponent implements OnInit, OnChanges, OnDestroy {
    public matrixSusbscription: Subscription;

    @ViewChild('canvas') private canvas;
    @Input() public evaluationId;
    @Input() public structureId;
    @Input() public familyId;

    private highChartOptions = {
        colorAxis: {
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        drillUpButton: {
            theme: {
                width: 120,
                height: 15
            }
        },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            animationLimit: 1000,
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 3
            }],
            turboThreshold: 100000,
            data: [],
        }],
        tooltip: {
            formatter: function () {
                if (this.point.isChildren) {
                    return this.point.name;
                }
                return this.point.realValue || this.point.value;
            }
        },
        title: {
            text: ''
        },
        //legend: {
        //  enabled: false
        //}
    };

    constructor(private apiService: ApiService) { }

    ngOnInit() {
    }

    ngOnDestroy(): void {
        if (this.matrixSusbscription) {
            this.matrixSusbscription.unsubscribe();
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (Object.values(changes).some(value => value.isFirstChange())) return;

        if (Object.keys(changes).some(k => k === 'evaluationId')) {
            if (changes.evaluationId.currentValue !== changes.evaluationId.previousValue) {
                this.evaluationId = changes.evaluationId.currentValue;
                this.getPerformanceMatrix();
            }
        }
        if (Object.keys(changes).some(k => k === 'structureId')) {
            if (changes.structureId.currentValue !== changes.structureId.previousValue) {
                this.structureId = changes.structureId.currentValue;
                this.getPerformanceMatrix();
            }
        }

        if (Object.keys(changes).some(k => k === 'familyId')) {
            if (changes.familyId.currentValue !== changes.familyId.previousValue) {
                this.familyId = changes.familyId.currentValue;
                this.getPerformanceMatrix();
            }
        }
    }

    private getPerformanceMatrix() {
        this.matrixSusbscription = this.apiService.getPerformanceMatrix(this.structureId, this.familyId, this.evaluationId)
            .subscribe(data => this.fillMatrix(data));
    }

    public descriptions = [
        { value: 5, text: 'Desempeño ejemplar', color: '#173463' },
        { value: 4, text: 'Excelente nivel de desempeño', color: '#B4C7E7' },
        { value: 3, text: 'Buen nivel de desempeño', color: '#00AD49' },
        { value: 2, text: 'Necesita consolidar comportamientos', color: '#FFC000' },
        { value: 1, text: 'Alejado del perfi', color: '#FF0000' },
    ];

    private fillMatrix(data) {
        this.highChartOptions.series[0].data = [];

        let performancePoint;
        let employeePoint;

        data.forEach((performance, index) => {
            const desc = this.descriptions.find(d => d.value === performance.roundCount);
            performancePoint = {
                id: `id_${performance.roundCount}`,
                name: performance.title,
                color: desc.color,
                realValue: performance.count,
                value: 100,
                isChildren: false
            };
            performance.employees.forEach(employee => {
                employeePoint = {
                    id: `id_${performance.employee}`,
                    name: `${employee.name} ${employee.lastName1} ${employee.lastName2}`,
                    parent: `id_${performance.roundCount}`,
                    value: 10,
                    isChildren: true
                };
                this.highChartOptions.series[0].data.push(employeePoint);
            });
            this.highChartOptions.series[0].data.push(performancePoint);
        });

        // @ts-ignore
        Highcharts.chart(this.canvas.nativeElement, this.highChartOptions);
    }

}

和其他导入热图模块的组件

import { Component, OnInit, ViewChild, Input, SimpleChanges, OnChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
import { ApiService } from 'src/common/services/api.services';
import { MatDialog } from '@angular/material';
import { PerformanceVsPotentialGridModalComponent } from './performance-vs-potential-grid-modal/performance-vs-potential-grid-modal.component';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/common/services/auth.service';
import * as _ from 'lodash';

import * as Highcharts from 'highcharts';
import noData from 'highcharts/modules/no-data-to-display';
import heatmap from 'highcharts/modules/heatmap';
import accessibility from 'highcharts/modules/accessibility';


noData(Highcharts);
heatmap(Highcharts);
accessibility(Highcharts);

@Component({
    selector: 'app-performance-vs-potential',
    templateUrl: './performance-vs-potential.component.html',
    styleUrls: ['./performance-vs-potential.component.scss'],

})
export class PerformanceVsPotentialComponent implements OnInit, OnChanges, OnDestroy {
    public matrixSusbscription: Subscription;

    @Input() public evaluationId;
    @Input() public structureId;
    @Input() public familyId;


    public isAdmin = false;
    public isRRHH = false;

    @ViewChild('canvas') private canvas;

    private highChartOptions = {
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },
        title: {
            text: 'Crecimiento en la empresa'
        },
        xAxis: {
            categories: ['No', 'Si, con desarrollo', 'Si'],
        },

        yAxis: {
            categories: ['Desempeño ejemplar Excelente nivel de desempeño', 'Buen nivel de desempeño', 'Necesita consolidar comportamientos Alejado del perfil'],
            title: {
                text: 'Resultado Evaluación'
            },
            reversed: true
        },

        accessibility: {
            point: {
                descriptionFormatter: function (point) {
                    var ix = point.index + 1,
                        xName = getPointCategoryName(point, 'x'),
                        yName = getPointCategoryName(point, 'y'),
                        val = point.value;
                    return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
                }
            }
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        // legend: {
        //     align: 'right',
        //     layout: 'vertical',
        //     margin: 0,
        //     verticalAlign: 'top',
        //     y: 25,
        //     symbolHeight: 280
        // },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
            }
        },
        series: [{
            name: 'Crecimiento vs Evaluación',
            borderWidth: 1,
            data: [],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    yAxis: {
                        labels: {
                            formatter: function () {
                                return this.value.charAt(0);
                            }
                        }
                    }
                }
            }]
        }
    };

    constructor(private apiService: ApiService, public dialog: MatDialog, private authService: AuthService) { }

    ngOnInit() {
        const token = this.authService.decryptedToken();
        if (token.roles.includes('ADMIN')) {
            this.isAdmin = true;
        }
        if (token.roles.includes('RRHH')) {
            this.isRRHH = true;
        }

    }

    ngOnDestroy(): void {
        if (this.matrixSusbscription) {
            this.matrixSusbscription.unsubscribe();
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (Object.values(changes).some(value => value.isFirstChange())) return;

        if (Object.keys(changes).some(k => k === 'evaluationId')) {
            if (changes.evaluationId.currentValue !== changes.evaluationId.previousValue) {
                this.evaluationId = changes.evaluationId.currentValue;
                this.getMatrix();
            }
        }
        if (Object.keys(changes).some(k => k === 'structureId')) {
            if (changes.structureId.currentValue !== changes.structureId.previousValue) {
                this.structureId = changes.structureId.currentValue;
                this.getMatrix();
            }
        }

        if (Object.keys(changes).some(k => k === 'familyId')) {
            if (changes.familyId.currentValue !== changes.familyId.previousValue) {
                this.familyId = changes.familyId.currentValue;
                this.getMatrix();
            }
        }

    }

    // private colorAxes = [{
    //     min: 0,
    //     minColor: '#FFFFFF',
    //     maxColor: Highcharts.getOptions().colors[0]
    //   }, {
    //     min: 0,
    //     minColor: '#FFFFFF',
    //     maxColor: Highcharts.getOptions().colors[1]
    //   }, {
    //     min: 0,
    //     minColor: '#FFFFFF',
    //     maxColor: Highcharts.getOptions().colors[2]
    //   }, {
    //     min: 0,
    //     minColor: '#FFFFFF',
    //     maxColor: Highcharts.getOptions().colors[3]
    //   }];

    public getMatrix() {
        this.matrixSusbscription = this.apiService.performanceVSPotentialMatrix(this.structureId, this.familyId, this.evaluationId)
            .subscribe(data => this.fillMatrix(data));
    }

    private fillMatrix(matrix) {
        this.highChartOptions.series[0].data = [];
        if (!matrix || matrix.length <= 0) return;



        const bajoDesempenoBajoPotencial = matrix.find(e => e.potential === 'bajoDesempeno' && e.performance === 'bajoPotencial') || { employees: [] };
        const bajoDesempenoBajoPotencialCount = _.isNil(bajoDesempenoBajoPotencial) ? 0 : bajoDesempenoBajoPotencial.employees.length;

        const bajoDesempenoMedioPotencial = matrix.find(e => e.potential === 'bajoDesempeno' && e.performance === 'medioPotencial') || { employees: [] };
        const bajoDesempenoMedioPotencialCount = _.isNil(bajoDesempenoMedioPotencial) ? 0 : bajoDesempenoMedioPotencial.employees.length;

        const bajoDesempenoAltoPotencial = matrix.find(e => e.potential === 'bajoDesempeno' && e.performance === 'altoPotencial') || { employees: [] };
        const bajoDesempenoAltoPotencialCount = _.isNil(bajoDesempenoAltoPotencial) ? 0 : bajoDesempenoAltoPotencial.employees.length;


        const medioDesempenoBajoPotencial = matrix.find(e => e.potential === 'medioDesempeno' && e.performance === 'bajoPotencial') || { employees: [] };
        const medioDesempenoBajoPotencialCount = _.isNil(medioDesempenoBajoPotencial) ? 0 : medioDesempenoBajoPotencial.employees.length;

        const medioDesempenoMedioPotencial = matrix.find(e => e.potential === 'medioDesempeno' && e.performance === 'medioPotencial') || { employees: [] };
        const medioDesempenoMedioPotencialCount = _.isNil(medioDesempenoMedioPotencial) ? 0 : medioDesempenoMedioPotencial.employees.length;

        const medioDesempenoAltoPotencial = matrix.find(e => e.potential === 'medioDesempeno' && e.performance === 'altoPotencial') || { employees: [] };
        const medioDesempenoAltoPotencialCount = _.isNil(medioDesempenoAltoPotencial) ? 0 : medioDesempenoAltoPotencial.employees.length;



        const altoDesempenoBajoPotencial = matrix.find(e => e.potential === 'altoDesempeno' && e.performance === 'bajoPotencial') || { employees: [] };
        const altoDesempenoBajoPotencialCount = _.isNil(altoDesempenoBajoPotencial) ? 0 : altoDesempenoBajoPotencial.employees.length;

        const altoDesempenoMedioPotencial = matrix.find(e => e.potential === 'altoDesempeno' && e.performance === 'medioPotencial') || { employees: [] };
        const altoDesempenoMedioPotencialCount = _.isNil(altoDesempenoMedioPotencial) ? 0 : altoDesempenoMedioPotencial.employees.length;

        const altoDesempenoAltoPotencial = matrix.find(e => e.potential === 'altoDesempeno' && e.performance === 'altoPotencial') || { employees: [] };
        const altoDesempenoAltoPotencialCount = _.isNil(altoDesempenoAltoPotencial) ? 0 : altoDesempenoAltoPotencial.employees.length;



        this.highChartOptions.series[0].data.push([0, 0, altoDesempenoBajoPotencialCount]);
        this.highChartOptions.series[0].data.push([0, 1, altoDesempenoMedioPotencialCount]);
        this.highChartOptions.series[0].data.push([0, 2, altoDesempenoAltoPotencialCount]);

        this.highChartOptions.series[0].data.push([1, 0, medioDesempenoBajoPotencialCount]);
        this.highChartOptions.series[0].data.push([1, 1, medioDesempenoMedioPotencialCount]);
        this.highChartOptions.series[0].data.push([1, 2, medioDesempenoAltoPotencialCount]);


        this.highChartOptions.series[0].data.push([2, 0, bajoDesempenoBajoPotencialCount]);
        this.highChartOptions.series[0].data.push([2, 1, bajoDesempenoMedioPotencialCount]);
        this.highChartOptions.series[0].data.push([2, 2, bajoDesempenoAltoPotencialCount]);

        // @ts-ignore
        Highcharts.chart(this.canvas.nativeElement, this.highChartOptions);
    }


    public openDialog(employees) {
        this.dialog.open(PerformanceVsPotentialGridModalComponent, { data: Object.assign({}, { employees }) });
    }
}

function getPointCategoryName(point, dimension) {
    var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
    return axis.categories[point[isY ? 'y' : 'x']];
}

问题是，当我在第二个组件上导入堆图时，颜色混合，热图图例栏出现在所有非热图图表中的图表中。在获得此组件之前，一切工作正常。

导入组件2之前的组件1，

导入组件2之后的组件1：

在此stackblitz示例中，您可以找到错误：

https://stackblitz.com/edit/angular-je2xri?file=src%2Fapp%2Fapp.component.html

Answer 1

如@KamilKulig所建议。解决方案是从图表属性中删除色轴

colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }