Question

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

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

为了更好的可视化，这是一个示例饼图：

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

Answer 1

我查看了文档并查看了generateLabels

的option.legend.labels选项

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

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}`
  }
}

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

1 个答案: