如何在条形图顶部显示 Chart.js 插件生成的天线而不重叠?

问题描述 投票:0回答:0

我创建了一个 Chart.js 插件来在图表中每个条形图的顶部绘制一个小天线,但是天线与条形图重叠。有没有办法保证天线显示在吧台上方,不被遮挡?

    const topAntenna = {
      id: 'topAntenna',
      order: 4,
      beforeDraw(chart, args, options) {
        const { ctx, config, scales: { x, y } } = chart;
        ctx.save();
        ctx.strokeStyle = 'red';
        var data = chart.data.datasets[0].data;
        if (data.length > 0) {
          debugger
          //ctx.strokeRect(x, y, width, height)
          ctx.fillRect(x.getPixelForValue(0), y.getPixelForValue(data[0][1]) - 20, 10, 60);
        }
        ctx.restore();
      }
    }

电流输出:

预期产出:

javascript typescript canvas chart.js
© www.soinside.com 2019 - 2024. All rights reserved.