ng2图表中产生了重复的图例 [英] Duplicate of legends are Produced in ng2 chart

问题描述

产生了具有相同数据标签的多个图例，但每个数据集我只需要一个标签.

Multiple legend of same data labels are produced but I only need single label for each dataset.

 this.BarChartLabels = []
    this.BarChartData = []
    this.Service.getCount().subscribe(data => {
             let len =data.length;           
             for(let i=0;i<data.length;i++) {
              this.BarChartLabels.push(data[i].date) var color1=['red','blue','green']
      var color=0  
              for(let j=0;j<data[i].Counters.length;j++)
              {
                const arr = Array(len).fill(0);
                arr[i] = data[i].Counters[j].count; 
               this.BarChartData.push({label:data[i].Counters[j].Name, data: arr, backgroundColor:color}) 
color++;
              }            
             }                        
    })

在这里，我得到了一个多级数组，因此我使用了循环来检索它.因此，我的图例多次获取相同的数据.有什么方法可以为图例生成单个数据.

Here I am getting a multi level array so I used for loop to retrieve it As a result my legend is taking same data multiple times. Is there any way by which could I produce a single data for legend.

推荐答案

图例具有一个过滤器参数，您可以使用该参数隐藏相同的标签:

The legend has a filter parameter which you can use to hide same labels: https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

用于过滤所有重复项的示例: https://jsfiddle.net/Leelenaleee/vto6z3g4/15/

Sample to filter out all duplicates: https://jsfiddle.net/Leelenaleee/vto6z3g4/15/

options: {
    legend: {
        labels: {
        filter: (legendItem,chartData) => {
          return !(chartData.labels.indexOf(legendItem.text) < legendItem.index);
        }
      }
    }
  }

这篇关于ng2图表中产生了重复的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！