在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中自定義餅圖圖例

回答

相關問題