Angular-Highcharts：切换选项卡时图表饼不起作用

Question

我尝试在标签中的Angular 9和Angular Material中延迟加载的视图中实现Highcharts v8.0.1。我有两个选项卡，饼图在第一个选项卡中。因此，当视图正常显示时，它可以正常工作……但是，当我按第二个选项卡然后按第一个选项卡返回时，图表消失了，只有指示器。仅此图表类型会出现此问题，我现在不知道如何解决。

非常感谢！

zones-pie-chart.component-html

<div class="card bg-dark shadow">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions[0]"
    [callbackFunction]=""
    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngular"
    style="width: 100%; height: 400px; display: block;"
  ></highcharts-chart>
</div>

zones-pie-chart.component.ts

@Component({
  selector: 'app-zones-pie-charts',
  templateUrl: './zones-pie-charts.component.html',
  styleUrls: ['./zones-pie-charts.component.css']
})
export class ZonesPieChartsComponent {
  // 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
  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]);
  }
}

zones.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ZonesRoutingModule } from './zones-routing.module';
import {PeopleIndicatorChartComponent} from '../../../components/people-indicator-chart/people-indicator-chart.component';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {FormsModule} from '@angular/forms';
import {HighchartsChartModule} from 'highcharts-angular';
import {MatTabsModule} from '@angular/material/tabs';
import {ZonesComponent} from './zones.component';
import {ZonesPublicResumeComponent} from '../../../components/zones-public-resume/zones-public-resume.component';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatButtonModule} from '@angular/material/button';
import {MatTooltipModule} from '@angular/material/tooltip';
import {ZonesPieChartsComponent} from '../../../components/zones-pie-charts/zones-pie-charts.component';
import {ZoneSummaryTableComponent} from '../../../components/zone-summary-table/zone-summary-table.component';
import {FlexModule} from '@angular/flex-layout';
import {MatIconModule} from '@angular/material/icon';
import {ZoneAnimalResumeComponent} from '../../../components/zone-animal-resume/zone-animal-resume.component';
import {PeopleCardModule} from '../../../components/people-card/people-card.module';

@NgModule({
  declarations: [
    ZonesComponent,
    PeopleIndicatorChartComponent,
    ZonesPublicResumeComponent,
    ZonesPieChartsComponent,
    ZoneSummaryTableComponent,
    ZoneAnimalResumeComponent
  ],
  imports: [
    CommonModule,
    ZonesRoutingModule,
    MatButtonToggleModule,
    FormsModule,
    HighchartsChartModule,
    MatTabsModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatButtonModule,
    MatTooltipModule,
    FlexModule,
    PeopleCardModule,
    MatIconModule,
  ]
})
export class ZonesModule { }

PS：这是我在平台上的第一个问题，请不要将我钉在十字架上（！Ja）。再次非常感谢！

Answer 1

看来问题是这样的：

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的选项中不支持渐变颜色，并且您正在全局设置此选项，因此所有将使用这些颜色的图表将不会收费。解决方案是在组件的开头定义angular的原始颜色，并在ngOnDestroy中设置原始颜色，如下所示：

@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=37824https://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>

我知道这只是一种解决方法，但是如果您使用的是延迟加载实现，则当您或某人找到解决方案时，它可以帮助您更改为正常加载实现。希望这个帮助;）