根据垂直条形图柱高设置数据标签的位置

Question

我正在使用带有图表 js 2.9.4 包的 vue chat js。并且还插入了图表 js 插件 datalabels 以显示数据标签。我创建了一个垂直条形图，当某些列的高度较低时，数据标签与 x 轴重叠。为了避免这种情况，我做了如下操作。

 plugins: {
   datalabels: {
     align(context) {
          const index = context.dataIndex
          const value = context.dataset.data[index]
          return value < 10 ? 'top' : 'center'
     },
   }
 }

如您所见，我不得不手动添加一个条件来设置数据标签的位置。如果该值小于 10，则数据标签应位于顶部，如果大于或等于 10，则应位于中心。但是您知道条件中的值 10 应该是动态的。那么有什么方法可以识别所用插件中的这种重叠行为，或者有什么好的方程式来解决这个问题吗？

Answer 1

取您显示的数据集的最大值

  const data = context.dataset.data
  const max = Math.max( ...data )

然后，如果对于给定的条柱，它低于最大条柱值的 10%（或其他百分位），那么就按照您的操作进行。

总计：

  const index = context.dataIndex
  const data = context.dataset.data
  const max = Math.max( ...data )
  const percentil = 0.10
  const value = data[index]
  return value < max * percentil ? 'top' : 'center'

根据垂直条形图柱高设置数据标签的位置

set the position of data label according to vertical bar chart column height

vue.js

charts

vue-chartjs