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

Question

I have a request from a client who wants me to display the data labels at each point on the line plot, just as the image shows.我有一个客户的请求，他希望我在 plot 线上的每个点上显示数据标签，如图所示。 I place what I have made of code so far.到目前为止，我放置了我所做的代码。 What is missing in my configuration or code to achieve it?我的配置或代码中缺少什么来实现它？ I have gone through the documentation for Chart.js and haven't found anything so far.我浏览了 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

You can use the datalabels plugin for this ( https://v2_0_0-rc_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html )您可以为此使用 datalabels 插件（ https://v2_0_0-rc_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html ）

Example:例子：

 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

Here is a basic solution without plugins这是一个没有插件的基本解决方案

<!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>

It's just an use case, fiddle here这只是一个用例，在这里摆弄

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

问题描述

2 个解决方案

解决方案1
1 2021-06-07 18:31:45

解决方案2
1 已采纳 2021-06-07 19:33:16

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

问题描述

2 个解决方案

解决方案1 1 2021-06-07 18:31:45

解决方案2 1 已采纳 2021-06-07 19:33:16

解决方案1
1 2021-06-07 18:31:45

解决方案2
1 已采纳 2021-06-07 19:33:16