Question

我有一个客户的请求，他希望我显示线图上每个点的数据标签，如图所示。到目前为止，我放置了我编写的代码。我的配置或代码中缺少什么来实现它？我已经浏览了 Chart.js 的文档，但到目前为止还没有找到任何东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <div style="width: 450px; height: 450px;"><canvas id="myChart" width="400" height="400"></canvas></div>
  
  <script>
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016','2017', '2018', '2019', '2020'],
        datasets: [{
          fill:false,
          label: 'Cantidad Estudiantes',
          data: [12,15,9,0,9,13,13,16,26,22,0,18,9,10,11,8,9,12],
          
          borderColor: [
            'rgba(255, 99, 132, 1)',
            
          ],
          borderWidth: 3
        }]
      },
      options: {
        plugins: {
          datalabels: {
              anchor: 'start',
              align: '-45',
              clamp: true,
              color: "orange",
          }
        },
        legend: {
          labels: {
              fontColor: "#acb5bf",
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
    );
  </script>
</body>
</html>

Answer 1

您可以为此使用数据标签插件 (https://v2_0_0-rc_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html)

示例：

Chart.register(ChartDataLabels);

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderColor: 'white',
        borderRadius: 25,
        borderWidth: 3,
        color: 'white',
        font: {
          weight: 'bold'
        },
        padding: 6,
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
</body>

Answer 2

这是一个没有插件的基本解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <div style="width: 450px; height: 450px;"><canvas id="myChart" width="400" height="400"></canvas></div>
  
  <script>
  function square_data(chart){
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FFA500";
    ctx.rect(145, 70, 15, 15);
    ctx.fill()
    ctx.fillStyle = "#fff";
    ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10);

    ctx.stroke();
    return c
}

    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016','2017', '2018', '2019', '2020'],
        datasets: [{
          fill:false,
          label: 'Cantidad Estudiantes',
          data: [12,15,9,0,9,13,13,16,26,22,0,18,9,10,11,8,9,12],
          
          borderColor: [
            'rgba(255, 99, 132, 1)',
            
          ],
          borderWidth: 3
        }]
      },
      options: {
        plugins: {
          datalabels: {
              anchor: 'start',
              align: '-45',
              clamp: true,
              color: "orange",
          }
        },
        elements:{
            "point":{"pointStyle":square_data},
        },
        legend: {
          labels: {
              fontColor: "#acb5bf",
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
    );
  </script>
</body>
</html>

这只是一个用例，小提琴 here

如何在 Chart.js 的图表中显示数据标签？

2 个答案: