菜鸟教程
教程 chartjs tutorial

使用生态插件

Chart.js 拥有丰富的生态插件，能够扩展图表的功能，比如数据标签（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 },
    },
  },
});
在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Chart.js 生态插件示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 700px;
margin: 2rem auto;
font-family: sans-serif;
background: #f9f9f9;
padding: 1rem;
text-align: center;
}


canvas {
  background: #fff;
  border: 1px solid #ccc;
  margin: 1rem auto;
}



</style>
</head>


<body>
<canvas id="pluginChart" width="700" height="400"></canvas>
<script>
(function () {
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 }
      }
    }
  });
})();



</script>
</body>


</html>

相关内容