时间戳

首页 > 解决方案 > Angular如何在甜甜圈chartjs的每个部分中显示数据

angular - Angular如何在甜甜圈chartjs的每个部分中显示数据

问题描述

如何使用角度在甜甜圈chartjs的每个部分中显示数据我制作了这样的代码但它不起作用

 public doughnutChartLabels: string[] = [
    'Demo',
    'Test',
    'Live',


  ];

  public dougnutChartPlugins=[this.doughnutChartLabels];
public  doughnutChartLegend=true;
  doughnutChartData = [];
  
  public doughnutChartColors: any[] = [
    {
      backgroundColor: ['#735A84', '#E76412', '#9BC311',],
    },
  ];
  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public doughnutChartType = 'doughnut';
  public doughnutChartOptions: any = {
    animation: false,
    responsive: true,
   
    maintainAspectRatio: true,
    plugins: {
      datalabels: {
        font: {
          weight: 'bold',
          size: 19
        }
      }
    }   
  };

和我这样的html

<canvas baseChart class="chart" [data]="doughnutChartData" [labels]="doughnutChartLabels"
                      [options]="doughnutChartOptions" [chartType]="doughnutChartType"                      
                       [legend]="doughnutChartLegend"
                       [plugins]="dougnutChartPlugins"
                      [colors]="doughnutChartColors">
                                       </canvas>

我发现了类似的东西 在这里输入图像描述

但我想要这样的东西 在此处输入图像描述

我需要一些帮助，谢谢 ylu

标签： angulartypescriptchart.js

解决方案

这在 chart.js 中默认是不可能的，所以你需要一个插件，一个很棒的插件是datalabels plugin

Chart.register(ChartDataLabels);

const options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, ctx) => (ctx.chart.data.labels[ctx.dataIndex]),
        color: '#fff',
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>

推荐阅读