Chart.JS - Werte über die Punkte zeigen

Question

Guten Abend,

Ich versuche ein Liniendiagramm zu erstellen, das API-Antwortzeit darstellt. Das Problem ist, dass ich in der Chart.JS-Dokumentation keine Lösung gefunden habe. Gibt es eine native Lösung oder eine Lösung mit Canvas API?

Ich möchte das Diagramm wie folgt aussehen bekommen:

Hier ist der Code, die ich verwendet habe, um das Diagramm

<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

Aufruf eine Funktion während und nach der Animation

zu erzeugen

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); 
       } 
      }); 
     });   
    }