How to add a custom plugin (or use quadrants) with ConsoleTVs Laravel Chart Plugin?

Question

我正在使用 Laravel 图表 (https://charts.erik.cat/) 和默认的 ChartJS 库。

效果很好，除了我不知道如何添加自定义插件。我一直在尝试使图表的背景在 X 轴（时间）的特定点处变为不同的颜色，以便图表在特定时间后变为红色。

我一直找不到任何关于向实际使用该库的 ChartJS 添加自定义插件的文档。

我看到您可以在选项中将选项传递给插件，就像我对工具提示所做的那样：

控制器...

$bid_growth_chart->options([
    'plugins' => '[{
        tooltip: {
            callbacks: {
                footer: footer
            }
        }
    }]... SNIP);

刀片...

const footer = function(tooltipItems) {
    let label = '';
    tooltipItems.forEach(function(tooltipItem) {
        label = tooltipItem.raw.label;
    });
    return label;
};

所以我尝试了很多不同的象限插件组合：

在我的刀片文件中

const quadrants = {
  id: 'quadrants',
  beforeDraw(chart, args, options) {
    const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
    const midX = x.getPixelForValue(0);
    const midY = y.getPixelForValue(0);
    ctx.save();
    ctx.fillStyle = options.topLeft;
    ctx.fillRect(left, top, midX - left, midY - top);
    ctx.fillStyle = options.topRight;
    ctx.fillRect(midX, top, right - midX, midY - top);
    ctx.fillStyle = options.bottomRight;
    ctx.fillRect(midX, midY, right - midX, bottom - midY);
    ctx.fillStyle = options.bottomLeft;
    ctx.fillRect(left, midY, midX - left, bottom - midY);
    ctx.restore();
  }
};

然后传入

$bid_growth_chart->options([
    SNIP
    'plugins' => '[{
        tooltip: {
            callbacks: {
                footer: footer
            }
        },
        quadrant: quadrant
    }]',

我试过在控制器中粘贴实际的 javascript 代码，例如：

'plugins' => '[{
    SNIP,
    quadrant: beforeDraw(chart, args, options)...
}]',

等等。

我试过查看 ConsoleTVs 的实际源代码，但它显然超出了我的理解，因为我什至无法获得一个插件来登录到控制台。

如何使用带有 ChartJS 库的 Laravel Charts 向图表添加自定义插件？理想情况下，我会让图表在 X 轴上以特定值变为红色，但我会接受警报。我能找到的每篇教程和文章都使用相同的工具提示示例，或者只是说使用象限插件——我无法做任何事情。

编辑：记得我也尝试过使用

$bid_growth_chart->plugins('quadrants')

或

$bid_growth_chart->plugins(ACTUAL JS AS STRING)