# 自定义插件

URL: https://caijiao.org/chartjs/06-advanced/02-custom-plugins
Source: docs/chartjs/06-advanced/02-custom-plugins.md
Description: 介绍如何为 Chart.js 创建自定义插件，实现自定义绘制效果、事件处理或图表生命周期扩展，提升图表的灵活性与个性化。

[Chart.js](/chartjs/) 支持通过插件机制扩展功能。自定义插件可以在图表的不同生命周期钩子里执行代码，比如绘制前、绘制后、更新时等，实现特殊效果或业务需求。

下面示例演示一个简单插件，在图表绘制后在画布上绘制一段文字水印。

```js
(function () {
  const watermarkPlugin = {
    id: "watermark",
    afterDraw(chart) {
      const ctx = chart.ctx;
      ctx.save();
      ctx.font = "bold 24px Arial";
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.textAlign = "center";
      ctx.fillText("Chart.js 教程水印", chart.width / 2, chart.height / 2);
      ctx.restore();
    },
  };

  const ctx = document.getElementById("pluginChart").getContext("2d");

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["一月", "二月", "三月", "四月"],
      datasets: [
        {
          label: "销售额",
          data: [30, 50, 70, 60],
          backgroundColor: "rgba(75, 192, 192, 0.7)",
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
      },
    },
    plugins: [watermarkPlugin],
  });
})();
```

[在线代码演示](/chartjs/demos/21.html)