マウスオーバーなしでchartjsにラベルを表示する方法は？

Question

最新のChart Jsを使用しています。私は常にグラフにラベルを表示する必要があります（マウスオーバーはありません）。出来ますか？はいの場合は、作業サンプルコードで私を助けてください。

ありがとうございます。

私の現在の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 
       } 
      }] 
     } 
    }  
}); 

私は誰かが助けることができると思います。事前にありがとう

Answer 1

これは、optionsonAnimationCompleteとtooltipeventsを追加することで解決できます。

onAnitmationComplete関数は、showToolTipメソッドを呼び出して、ホバーイベントのようにtooltipsを表示します。

通常、tooltipeventsは、tooltipsを表示するように定義されていますが、ここでは空の配列を渡す必要があります。折れ線グラフについては下記の例を確認してください。

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

    showTooltips: true, 

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

注：このアプローチでは、行と棒グラフで複数のデータ・セットをサポートしていませんが、円グラフで複数のデータ・セットをサポートしていない

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>