在chart.js中自定义饼图图例-Java 学习之路

我在PrimeNG中使用ChartModule，它使用Chart.js .

我有一个饼图，显示了一些不同类型的数据，但其中一种类型（交付）有时会有多个实例 . 例如，我可能有10种不同的交付方式，所有这些都将拥有自己的馅饼 . 每个都是相同的颜色，因为它们都是交付 . 这导致我的传奇有10个不同的标签，都是相同的颜色，如“2017年5月1日送到肯德基”，“2017年5月8日送到肯德基”等等 . 我想要当你将鼠标悬停在饼图上以获取更多细节时，细节会继续显示，但是我希望我的传奇只显示“交付”一次，所以我没有一个充满相同颜色标签的巨大传奇 . 我该怎么做呢？

为了更好地可视化，下面是一个示例饼图：

enter image description here

当您将鼠标悬停在两个蓝色饼图中的一个上时，我希望它继续显示额外的细节，但是，我希望图例只有一个蓝色标签，只是简单地说“交付” . 我怎样才能做到这一点？

1 回答

我查看了文档，看到 option.legend.labels 的 generateLabels 选项

这里是代码：我记录了线条，而不是需要解释 .

Plunker：https：//plnkr.co/edit/pslaed7IIUZzazpNEFZU？p = preview

@Component({
  selector: 'my-app',
  template: `
    <div style="display: block">
  <canvas baseChart
              [data]="data"
              [labels]="labels"
              [chartType]="type"
              [options]="opts"></canvas>
</div>
  `,
})
export class App {
  name:string;
  public labels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public data:number[] = [350, 450, 100];
  public type:string = 'pie';
  opts = 
  {
    // new option - not in chartjs doc
    newLegendLabels: ['NEW: Download Sales', 'NEW: In-Store Sales', 'NEW: Mail-Order Sales'];
    legend:
    {
      labels:
      { 
        // provide a function for label generation
        // doc: http://www.chartjs.org/docs/#chart-configuration-legend-label-configuration
        generateLabels:
          function(chart){
            var newLabels = [];
            // call the default generateLabels
            Chart.defaults.doughnut.legend.labels.generateLabels(chart)
            // loop over the default ones and override the text
            .forEach((label,i) =>
            { 
              // override the text with new corresponding text from newLegendLabels
              label.text = chart.options.newLegendLabels[i];
              // push new label
              newLabels.push(label)
            });
            // return new labels
            return newLabels;
          }
      }

    }
  }
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

回复于 2024-04-28T14:29:40+08:00

在chart.js中自定义饼图图例

1 回答

相关问题