# 使用生态插件

URL: https://caijiao.org/chartjs/08-framework/03-plugins
Source: docs/chartjs/08-framework/03-plugins.md
Description: 介绍如何在 Chart.js 中使用生态插件，扩展图表功能，如数据标签、缩放和平移等常用插件的安装与基本使用。

[Chart.js](/chartjs/) 拥有丰富的生态插件，能够扩展图表的功能，比如数据标签（Data Labels）、缩放和平移（Zoom and Pan）等。通过安装并引入这些插件，可以轻松实现更多交互和展示效果。

以下示例演示如何引入并使用 `chartjs-plugin-datalabels` 插件，为柱状图添加数据标签。

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

Chart.register(window["ChartDataLabels"]);

const pluginChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["红", "蓝", "黄", "绿", "紫", "橙"],
    datasets: [
      {
        label: "销量",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: "rgba(255, 99, 132, 0.7)",
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      datalabels: {
        color: "#fff",
        anchor: "end",
        align: "top",
        font: {
          weight: "bold",
        },
      },
      legend: { display: true },
    },
  },
});
```

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