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

83qze16e 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(174)

下面是我用来解决这个问题的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在函数中可用。
因此，我认为实现这一点的方法是在动画渲染后获取值。是否有一种方法可以在数据标签的偏移函数中实现这一点，或者有其他方法可以实现这一点？

chart.js

来源：https://stackoverflow.com/questions/72452650/how-do-you-get-the-width-of-a-datalabel-from-the-chartjs-plugin-after-the-chart

2条答案

按热度按时间

23c0lvtd1#

您可以在模型上使用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

赞(0）回复(0）举报 2022-11-07

xtupzzrd2#

我可能想错了。通过对这些值的研究，我意识到值本身是一个很好的指示，它应该是在棒线之内还是之外。我所做的是计算该值是否大于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
      }
    },
  }

赞(0）回复(0）举报 2022-11-07

我来回答

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

2条答案

相关问题

热门标签

最新问答