Блог

Я использую угловые ng2-диаграммы для отображения данных в пончиковой диаграмме, в локальной версии все работает нормально, проблема в том, что когда я запускаю проект в версии для разработчиков, метки на пончиковой диаграмме исчезли. Я не нахожу, в чем проблема.

и это Код

   public doughnutChartLabels: Label[] = ['Test1', 'Test2', 'Test3'];
  public doughnutChartData: MultiDataSet;
  public doughnutChartType: ChartType = 'doughnut';
  public colors: any[] = [{ backgroundColor: ["#E3F0FD", "#C4F8DD", "#A499FF"] }];
  public chartOptions: any = {
  legend: {
    display: false,
   },
  pieceLabel: {
   render: function (args) {
    const label = args.label,
      value = args.value;
      return value  "%";
  },
  fontStyle: 'bold',
}
}
 

затем я вызываю doughnutChartData в ngAfterViewInit таким образом

         this.doughnutChartData = [[Test1.data,Test2.data,Test3.data]]
 

И в HTML

 <canvas id="myChart" #myChart baseChart [data]="doughnutChartData" [options]="chartOptions"
                    height="70" width="100" [colors]="colors" [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType">
                </canvas>
 

Вы можете добавить плагин chartjs-плагин-метки данных. Из примера:

 import * as pluginDataLabels from 'chartjs-plugin-datalabels';

...

public pieChartPlugins = [pluginDataLabels];

public pieChartOptions: ChartOptions = {
  ...,
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {
        const label = ctx.chart.data.labels[ctx.dataIndex];
        return label;
      }
    }
  }
};
 

И в вашем шаблоне:

 <canvas ...
  [plugins]="pieChartPlugins">
</canvas>
 

Плагин требует Chart.js 3.икс.