顯示沒有 hover chartjs 的點數據

Question

嗨，伙計們，我用chartjs創建了這個圖表，如您所見，您可以通過hover查看他們的協調或數據，我想有一個選項來顯示他們而不必hover。 我想這樣做的原因是因為我要將導出添加到 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