Chart.JS - 在點頂部顯示值

Question

晚上好，

我試圖建立一個代表API響應時間的折線圖。問題是我沒有在Chart.JS文檔中找到任何解決方案。有沒有使用canvas API的本地解決方案或任何解決方案？

我想要得到的圖表看起來像這樣：

這裏是我用來生成期間和之後的動畫圖表

<script> 
    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: hoursArrFirst, 

      datasets: [{ 
       label: 'First Brand API', 
       data: timeArrProftit, 
       borderWidth: 1, 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.05)', 
        'rgba(255, 159, 64, 0.05)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(255, 59, 64, 1)' 
       ] 
      },{ 
       label: 'Second Brand API', 
       data: timeArrSecond, 
       borderWidth: 1, 
       backgroundColor: [ 
        'rgba(132, 255, 99, 0.05)', 
        'rgba(64, 255, 159, 0.05)' 
       ], 
       borderColor: [ 
        'rgba(32,155,99,1)', 
        'rgba(64,155, 59, 1)' 
       ] 
      },{ 
       label: 'Third Brand API' , 
       data: timeArrThird, 
       borderWidth: 1, 
       backgroundColor: [ 
        'rgba(32, 99, 255, 0.05)', 
        'rgba(64, 59, 255, 0.05)' 
       ], 
       borderColor: [ 
        'rgba(32, 99, 120, 1)', 
        'rgba(64, 59, 120, 1)' 
       ] 
      }] 


     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 


</script> 

Answer 1

調用一個函數的代碼

var options = { 
    onAnimationProgress: function() { drawDatasetPointsLabels() }, 
    onAnimationComplete: function() { drawDatasetPointsLabels() } 
} 

---

function drawDatasetPointsLabels() { 
     ctx.font = '.9rem sans-serif'; 
     ctx.fillStyle = '#AAA'; 
     ctx.textAlign="center"; 
     $(Trends.datasets).each(function(idx,dataset){ 
      $(dataset.points).each(function(pdx,pointinfo){ 
       // First dataset is shifted off the scale line. 
       // Don't write to the canvas for the null placeholder. 
       if (pointinfo.value !== null) { 
        ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15); 
       } 
      }); 
     });   
    }