Chartjs：使用 chartjs-plugin-datalabels 在较小的数据集中重叠数据标签答案

【问题标题】：Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabelsChartjs：使用 chartjs-plugin-datalabels 在较小的数据集中重叠数据标签
【发布时间】：2020-01-19 04:17:35
【问题描述】：

我正在使用 chartjs-plugin-datalabels，并且在大图表中显示较小的数据集时值重叠

这里是 chartjs-data-plugin 配置

options: {
        plugins: {
            datalabels: {
                    color: 'black',
                    clamp:true,
                    display: function(context) {
                        return context.dataset.data[context.dataIndex] >= 1;
                    }
            }
        }
    }

【问题讨论】：

标签： javascript reactjs charts chart.js

【解决方案1】：

尝试将显示设置为自动。

display: 'auto' 选项可用于防止标签重叠，当两个标签重叠时，基于以下规则：

如果两个标签都是 display: true，它们将重叠绘制
如果两个标签都显示：'auto'，则具有最高数据索引的标签将
隐藏起来。
如果标签位于同一数据索引中，则数据集索引最高的标签将
隐藏起来。
如果一个标签是 display: true 而另一个是 display: 'auto'，则一个带有 'auto' 将被隐藏（无论数据/数据集索引如何）

访问https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#visibility

【讨论】：

嘿，有什么你知道的可以让标签稍微远离彼此（例如，如果我们正在处理垂直堆叠条形图，最好是垂直移动）而不是隐藏重叠的？
@Matvey --- 你在这里做了什么？我在应用程序的其他地方为工具提示做了类似粒子碰撞检测器的东西......但它很毛茸茸。希望避免在饼图上这样做。
@SeanHalls 我想我只是让它自动隐藏重叠标签...