图表动画后，如何从 Chartjs 插件中获取数据标签的宽度？

Question

这是我用来解决这个问题的codepen。我想做的是获取水平条的长度以确定标签是应该绘制在条的内部还是外部。目前，我正在发生的事情：

{
  datalabels: {
    color: function(context) {
      return [0, 3].includes(context.dataIndex) ? 'black' : 'white'
    },
    anchor: 'start',
    align: 'right',
    offset: function(context) {
      const chart = context.chart;
      const area = chart.chartArea;
      const meta = chart.getDatasetMeta(context.datasetIndex);
      const model = meta.data[context.dataIndex];
      // model.width is NaN
      // is there a way to get this value
      // after the animation is complete?
      console.log(model, model.width)
      return 4;
    },
    font: {
      size: 9
    }
  }

当您运行 codepen 时，您会注意到 model.width 打印为 NaN 但是当您查看对象本身时 model.width 就在那里。如果我引入一个 setTimeout 来记录它存在的值（不是 NaN）。当我关闭动画时 model.width 在函数中可用。

因此，我认为实现这一点的方法是在动画渲染后获取值。有没有办法在数据标签的偏移函数中做到这一点，或者有另一种方法吗？

Answer 1

我可能想错了。通过研究这些值，我意识到值本身可以很好地指示它应该在栏内还是栏外。相反，我所做的是评估该值是否大于 30。如果是，则颜色为白色，锚点设置为开始。如果小于 30 颜色为黑色，锚点设置为结束：

https://codepen.io/thoughtassassin/pen/rNJvOrj

plugins: {
    datalabels: {
      color: (context) => getValue(context) > 30 ? '#fff' : '#000',
      anchor: (context) => getValue(context) > 30 ? 'start' : 'end',
      align: 'right',
      offset: 5,
      font: {
        size: 9
      }
    },
  }

Answer 2

您可以在模型上使用 getProps 来获取动画结束后的宽度，如下所示：

offset: function(context) {
  const chart = context.chart;
  const area = chart.chartArea;
  const meta = chart.getDatasetMeta(context.datasetIndex);
  const model = meta.data[context.dataIndex];
  const {
    width
  } = model.getProps(['width'], true);
  console.log(width)
  return 4;
},

更新代码笔：https://codepen.io/leelenaleee/pen/MWQGbdM?editors=1010

图表动画后，如何从 Chartjs 插件中获取数据标签的宽度？

How do you get the width of a datalabel from the Chartjs plugin after the chart animates?

chart.js