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

我在PrimeNG中使用ChartModule，它使用Chart.js。在chart.js中自定义饼图图例

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

以便更好地观察，这里有一个例子饼图：

当你将鼠标悬停在两个蓝色派的作品之一，我希望它继续显示了额外的细节，但是，我想传说只有一个蓝色标签，简单地说“交货”。我怎样才能做到这一点？

来源

2017-05-04 Brett

你将不得不编写一个插件这个..如提供的标号用于两个传奇，提示它不是默认情况下可用。 –

我看了看的文档，看到的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}` 
    } 
}

来源

2017-05-04 23:26:52

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

回答

相关问题