comment afficher toujours l'étiquette dans chartjs sans mouseover?

Question

J'utilise la dernière version de Chart Js. Je dois toujours montrer l'étiquette dans le tableau (sans passer la souris). C'est possible? Si oui, alors s'il vous plaît aidez-moi avec le code d'exemple de travail.

Merci.

Mon actuel Code Chartjs:

var ctx = $("#myChart"); 
var label = ctx.data('clabel').split(','); 
var val = ctx.data('cval').split(','); 


var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: label, 
     datasets: [{ 
      label: 'Daily Capital', 
      data: val, 
      backgroundColor: [ 
       'rgba(0, 153, 34, 0.5)', 
      ], 
      borderColor: [ 
       'rgba(0, 153, 34, 1);', 
      ], 
      borderWidth: 2 
     }] 
    }, 
    options: { 
     responsive: true, 
     maintainAspectRatio: false, 
     legend: { 
      display: false, 
     }, 
     animation: { 
      duration: 0, // general animation time 
     }, 
     hover: { 
      animationDuration: 0, 
     }, 
     responsiveAnimationDuration: 0, // animation duration after a resize 
     elements: { 
      line: { 
       tension: 0, // disables bezier curves 
      }, 
     }, 
     tooltips: { 
      callbacks: { 
       label: function(tooltipItem, data){ 
        return '£' + tooltipItem.yLabel; 
       }, 
       title: function(tooltipItem, data){ 
        return ''; 
       }, 
      } 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     } 
    }  
}); 

J'espère que quelqu'un peut vous aider. Merci à l'avance

Answer 1

Cela pourrait être résolu en ajoutant le optionsonAnimationComplete et tooltipevents. Fonctions appelle la méthode showToolTip pour afficher le tooltips comme le fait un événement de survol.

Habituellement tooltipevents sont définis pour afficher tooltips mais ici un tableau vide doit être passé. Vérifiez l'exemple de violon ci-dessous pour le graphique linéaire.

var options = { 
    tooltipTemplate: "<%= value %>", 

    showTooltips: true, 

    onAnimationComplete: function() { 
    this.showTooltip(this.datasets[0].points, true); 
    }, 
    tooltipEvents: [] 
} 

Note: Cette approche ne prend pas en charge plusieurs ensembles de données dans les graphiques en ligne et un bar, mais ne supporte plusieurs ensembles de données dans les graphiques circulaires

var data_line = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    label: "My First dataset", 
 
    fillColor: "rgba(220,220,220,0.2)", 
 
    strokeColor: "rgba(220,220,220,1)", 
 
    pointColor: "rgba(220,220,220,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(220,220,220,1)", 
 
    data: [65, 59, 80, 81, 56, 55, 40] 
 
    }] 
 
}; 
 

 

 
var options = { 
 
    tooltipTemplate: "<%= value %>", 
 

 
    showTooltips: true, 
 

 
    onAnimationComplete: function() { 
 
    this.showTooltip(this.datasets[0].points, true); 
 
    }, 
 
    tooltipEvents: [] 
 
} 
 

 
var context = $('#chart3').get(0).getContext('2d'); 
 
var chart = new Chart(context).Line(data_line, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<div id="chartContainer"> 
 
    <canvas id="chart3" width="500" height="500"></canvas> 
 
</div>