使用生态插件

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

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

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 }
    }
  }
});

loading