设置图例的限制/最大数量

Question

假设我有一个圆环图，其中包含 5 个项目的数据，如下所示

const data = {
  labels: ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 3],
      backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
      borderWidth: 1,
    },
  ],
} 

我不希望它显示所有图例，因为我没有空间或任何原因

如何隐藏此示例中的绿色和紫色？

我的意思是仅来自传说而不是图表

Answer 1

我看到两种简单的方法，如何解决这个问题：（
我个人会使用下面的第二个选项，它更可配置，但只需要一点编码）

1. 您可以简单地从 - 数组中删除要删除的标签labels，它们不会显示在图例中。

   但请记住，您必须更改data和backgroundColor数组的顺序才能匹配此更改。

   这是一个简短的演示：

   const data = {
       labels: ['E-commerce',  'Enterprise', 'Grey'], // <-- just remove the unwanted labels
       datasets: [{
           data: [12, 19, 5, 3, 3], // <-- reorder
           backgroundColor: ['#C07CC3', '#9C3848',  '#ADA8B6', '#9DDBAD', '#606EDA'], // <-- reorder
           borderWidth: 1,
        }],
   };
   
   const config = {
       type: 'doughnut',
       data: data,
       options: {
           maintainAspectRatio: false,
           plugins: {
               legend: {
                   position: 'right',
                   labels: {
                       usePointStyle: true,
                   },
               }
           },
       }
   };
   
   new Chart(
       document.getElementById('chart'),
       config
   );

   <script src="//cdn.jsdelivr.net/npm/chart.js"></script>
   <div class="chart" style="height:184px; width:350px;">
       <canvas  id="chart" ></canvas>
   </div>

2. 更好更干净 （但需要一些编码），您可以使用函数 array 过滤掉您不想显示的label-itemsfilter。（详细信息可以在文档中找到）

   更新的替代版本演示：

   这里仅显示前 3 个标签（使用变量限制标签数量maxLabelsToShow）（排序顺序是降序，但更改此设置很容易）

function getLabelsOnlyTopX(num, data, labels){
    let selectedLabels = []
  
    //we don't want to alter the order
    let helperData = [...data];
  
    //sort in descending order
    helperData.sort( (a,b) => b-a);
  
    //get top X Values
    helperData = helperData.slice(0, num);
  
    //get index for the data
    let indexes = data.map( (value, index) => ({value,index}) ).filter(item => helperData.some(n1 => n1 == item.value))

    //slecet only labels with the correct index  
    selectedLabels = labels.filter((value, index) => indexes.some( n => n.index == index))
  
    // just be sure that a maximum of num labels are sent
    return selectedLabels.slice(0, num);
}

let maxLabelsToShow = 3;
let serverData = [12, 19, 3, 5, 3]
let labels = ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'];

// Calling the newly created function
let showOnly = getLabelsOnlyTopX(maxLabelsToShow, serverData, labels);

const data = {
    labels: labels,
    datasets: [{
        data: serverData,
        backgroundColor: ['#C07CC3', '#9C3848', 
            '#9DDBAD', '#ADA8B6', '#606EDA'],
        borderWidth: 1,
     }],
};

const config = {
    type: 'doughnut',
    data: data,
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    usePointStyle: true,
                    /* FILTER function */
                    filter: function(item, chart) {
                        return showOnly.indexOf( item.text) > -1;
                    }
                },
            }
        },
    }
};

new Chart(
    document.getElementById('chart'),
    config
);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>