如何解决在没有悬停图表的情况下显示点数据
大家好,我用chartjs创建了这个图表,正如你所看到的,你可以将鼠标悬停在点上以查看它们的协调或数据,我希望有一个选项,无需悬停即可显示它们。 我想要这样做的原因是因为我要将导出添加到 pdf,它会导出它在 HTML 上可以看到的任何内容,并且导出没有其值的图表对于最终用户来说是不可读的。 谢谢
.cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0.12),0 1px 2px rgba(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,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",{
data: [168,170,178,190,203,276,408,547,675,734],label: "Europe",borderColor: "#3cba9f",{
data: [40,20,10,16,24,38,74,167,508,784],label: "Latin America",borderColor: "#e8c3b9",{
data: [6,3,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>
解决方法
您可以为此使用数据标签插件,这将根据您的配置方式在其上方或其中添加每个点的值
https://chartjs-plugin-datalabels.netlify.app/samples/charts/line.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。