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

yr9zkbsy 于 2022-12-18 发布在 Chart.js

关注(0)|答案(1)|浏览(357)

假设我有一个圆环图，其中包含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,
    },
  ],
}

我不希望它显示所有的图例，因为我没有空间或任何原因
在本例中，如何隐藏绿色和紫色？
我是说只有传说而不是图表

chart.js

来源：https://stackoverflow.com/questions/74780348/set-a-limit-max-number-for-legends

1条答案

按热度按时间

lp0sw83n1#

在我的脑海中，我看到了两种简单的方法

1.只需从labels数组中删除您不希望在图例中显示的label-name

但是您必须对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>

1.或者更好，* 但需要一些编码，* 您可以使用函数filter过滤掉您不想显示的 * 标签项 *。（详细信息可以在in the documentation中找到）

更新的替代版本演示：

仅显示前X个标签 （限制标签数量）（当前排序顺序为降序，但很容易更改）*
一个二个一个一个

赞(0）回复(0）举报 2022-12-18

我来回答

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

1条答案

相关问题

热门标签

最新问答