显示没有悬停chartjs的点数据

Question

大家好，我用 chartjs 创建了这个图表，正如您所见，您可以将鼠标悬停在点上以查看它们的坐标或数据，我希望有一个选项可以显示它们而不必悬停。 我想这样做的原因是因为我要添加导出到 pdf，它会导出它在 HTML 上可以看到的任何内容，并且导出没有其值的图表对于最终用户来说是不可读的。 谢谢

.cann {
  border: 3px solid darkgrey;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    width: 650px;
    height: 250px;
    margin-left: 3em;


}

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"> </script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
// Turn over line chart
$(document).ready(function (){
        var ctx = document.getElementById('turn_over_line');
         var myChart = new Chart(ctx, {
   type: 'line',
  data: {
     labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,502,635,809,947,1402,3700,5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,203,276,408,547,675,734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10,16,24,38,74,167,508,784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2,2,7,26,82,172,312,433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
       animation: {
           duration : 700,
               easing : 'easeInOutSine',
    },
 title: {
        display: true,
        text: 'Turn over per site'
      },
       responsive : false,
  }
} );


     });
     </script>
     <canvas id="turn_over_line" class="cann"></canvas>

Answer 1

您可以为此使用数据标签插件，这将根据您的配置方式在其上方或其中添加每个点的值

https://chartjs-plugin-datalabels.netlify.app/samples/charts/line.html