简介

Chart.js是一款不依赖任何外部js库的图标插件，具体的使用方法可查看Chart.js官网。

需求

Chart.js并没有直接提供显示具体数据的功能，需要鼠标移上去才会显示数值，但是现在做项目需求时，需要在折线图上的区域上数据显示在点上，如上图所示

代码实现：

该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：
hover: { animationDuration: 0 // 防止鼠标移上去，数字闪烁 },

完整的代码

<!DOCTYPE html>
<html>
<head>
  <title>chartjs示例</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
  <div>
    <div style="width: 400px;height: 400px">
      <canvas id="myChart" width="400" height="400"></canvas>  
    </div>
  </div>
</body>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 20, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        hover: {
          animationDuration: 0  // 防止鼠标移上去，数字闪烁
        },
        animation: {           // 这部分是数值显示的功能实现
          onComplete: function () {
            var chartInstance = this.chart,
            ctx = chartInstance.ctx;
            // 以下属于canvas的属性（font、fillStyle、textAlign...）
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.fillStyle = "black";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y-5);
                });
            });
          }
        }
      }
    });
  </script>
</html>