ChartJS js-如何将对象数组解析为饼图的数据集

6qftjkof 于 2023-01-20 发布在 Chart.js

关注(0)|答案(1)|浏览(126)

我有Chart.js和图表数据，格式如下：

chartData = [
  { data: 2, label: 'Label 1' },  
  { data: 10, label: 'Label 2' },  
  { data: 40, label: 'Label 3' },
];

如何解析数据以获得如下所示的经典饼图：

我已经尝试遵循documentation，但它是不可用的。
这是我的模板：

<canvas baseChart
        [datasets]="chartData"
        [type]="pieChartType"
        [options]="pieChartOptions">
</canvas>

这是我的答案：

chartData = [
  { data: 2, label: 'Label 1' },  
  { data: 10, label: 'Label 2' },  
  { data: 40, label: 'Label 3' },
];

public pieChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: 'top',
    },
    datalabels: {
      formatter: (value, ctx) => {
        if (ctx.chart.data.labels) {
          return ctx.chart.data.labels[ctx.dataIndex];
        }
      },
    },
  }
};

chart.js

来源：https://stackoverflow.com/questions/75162135/chart-js-how-to-parse-array-of-objects-as-the-dataset-for-pie-chart

1条答案

按热度按时间

lb3vh1jj1#

饼图数据结构文档中提到：
数据集需要包含一个数据点数组。数据点应该是一个数字，
您需要遵循其结构如下：

public pieChartDatasets = [
  {
    data: [300, 500, 100],
  },
];

labels = [
    'Red',
    'Yellow',
    'Blue'
];

可以转换chartData以匹配其结构：

pieChartLabels: string[] = [];
pieChartDatasets: any[] = [];

this.pieChartLabels = this.chartData.map((x) => x.label);
this.pieChartDatasets = [
  {
    data: this.chartData.map((x) => x.data),
  },
];

在baseChart HTML元素中，将pieChartLabels传递给[labels]属性。

<canvas
  baseChart
  [datasets]="pieChartDatasets"
  [type]="pieChartType"
  [options]="pieChartOptions"
  [labels]="pieChartLabels"
>
</canvas>

Demo (CustomPieComponent) @ StackBlitz

赞(0）回复(0）举报 2023-01-20

我来回答

ChartJS js-如何将对象数组解析为饼图的数据集

1条答案

相关问题

热门标签

最新问答