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

我知道这只是一种解决方法，但如果您使用延迟加载实现，它可能会帮助您更改为正常加载，而您或其他人会找到解决方案。希望对您有所帮助；)