2017-08-21 21 views
2

Chart.jsを初めて使用しています。私は折れ線グラフを描いていますが、私は立ち往生しています。私はツールチップに%を表示する必要がありますが、%を追加すると結果は期待通りにはなりません。私は他の記事に行きましたが、解決策のどれも私を助けませんでした。Chart.jsツールチップに%を表示する方法

HTML:

<canvas id="myChart2"></canvas> 

JS:

window.onload = function() { 
      var ctx2 = document.getElementById('myChart2').getContext('2d'); 
      var data = [ 
      {date:'08-05-2017', run_rate: 50}, 
      {date:'08-06-2017', run_rate: 40}, 
      {date:'08-07-2017', run_rate: 30}, 
      {date:'08-08-2017', run_rate: 10}, 
      {date:'08-09-2017', run_rate: 6}, 
      {date:'08-10-2017', run_rate: 78}, 
      {date:'08-11-2017', run_rate: 32}, 
      {date:'08-12-2017', run_rate: 24} 
     ]; 
      var dates = data.map(function(obj){ 
      return obj.date; 
      }); 

      var count = data.map(function(obj){ 
      return obj.run_rate; 
      }); 

      var myChart = new Chart(ctx2, { 
      type: 'line', 
      data: { 
      labels: dates, 
      datasets: [{ 
       label: '%', 
       data: count, 
       backgroundColor: "rgba(38, 82, 123, 0.5)" 
      }] 
      }, 
      options: { 
       legend: { 
        display: false 
       }, 
      maintainAspectRatio: false, 
      responsive: true, 
      tooltips: {titleFontSize:12, bodyFontSize:12}, 
      scales: { 
       xAxes: [{ 
       display: true, 
       gridLines: { 
        display: true 
       }, 
       ticks: { 
       fontColor: '#000000' 
       }, 
       scaleLabel: { 
        display: false, 
        labelString: 'Date', 
        fontColor: '#000000' 
       } 
       }], 
       yAxes: [{ 
       display: true, 
       gridLines: { 
        display: true 
       }, 
       ticks: { 
       fontColor: '#000000', 
       callback: function(value){ 
        return value + "%" 
       } 
       }, 
       scaleLabel: { 
        display: false, 
        labelString: '', 
        fontColor: '#000000' 
       } 
       }] 
      } 
      //Scales Object Ends 
      } 
      //options object ends 
     }); 
     //End of function 
     }() 

私はあなたが私がYAxesに作られたコールバック関数に見ることができるようnum %としてY軸の数値を表示することができていますが、私はツールチップで試してみて同じ結果ではありません。私はnum %をツールチップに表示する必要があります。あらゆる知識が評価されます。ありがとう。

答えて

3

は、次のような、データ値と共に%記号を表示するには、ツールチップラベルにcallback機能を使用することができます。

tooltips: { 
    callbacks: { 
     label: function(t, d) { 
     var xLabel = d.datasets[t.datasetIndex].label; 
     var yLabel = t.yLabel; 
     return xLabel + ': ' + yLabel + '%'; 
     } 
    } 
} 

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var ctx2 = document.getElementById('myChart2').getContext('2d'); 
 
var data = [{ 
 
    date: '08-05-2017', 
 
    run_rate: 50 
 
}, { 
 
    date: '08-06-2017', 
 
    run_rate: 40 
 
}, { 
 
    date: '08-07-2017', 
 
    run_rate: 30 
 
}, { 
 
    date: '08-08-2017', 
 
    run_rate: 10 
 
}, { 
 
    date: '08-09-2017', 
 
    run_rate: 6 
 
}, { 
 
    date: '08-10-2017', 
 
    run_rate: 78 
 
}, { 
 
    date: '08-11-2017', 
 
    run_rate: 32 
 
}, { 
 
    date: '08-12-2017', 
 
    run_rate: 24 
 
}]; 
 
var dates = data.map(function(obj) { 
 
    return obj.date; 
 
}); 
 

 
var count = data.map(function(obj) { 
 
    return obj.run_rate; 
 
}); 
 

 
var myChart = new Chart(ctx2, { 
 
    type: 'line', 
 
    data: { 
 
     labels: dates, 
 
     datasets: [{ 
 
     label: 'Line', 
 
     data: count, 
 
     backgroundColor: "rgba(38, 82, 123, 0.5)" 
 
     }] 
 
    }, 
 
    options: { 
 
     legend: { 
 
     display: false 
 
     }, 
 
     maintainAspectRatio: false, 
 
     responsive: true, 
 
     tooltips: { 
 
     titleFontSize: 12, 
 
     bodyFontSize: 12, 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       var xLabel = d.datasets[t.datasetIndex].label; 
 
       var yLabel = t.yLabel; 
 
       return xLabel + ': ' + yLabel + '%'; 
 
      } 
 
     } 
 
     }, 
 
     scales: { 
 
     xAxes: [{ 
 
      display: true, 
 
      gridLines: { 
 
       display: true 
 
      }, 
 
      ticks: { 
 
       fontColor: '#000000' 
 
      }, 
 
      scaleLabel: { 
 
       display: false, 
 
       labelString: 'Date', 
 
       fontColor: '#000000' 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      display: true, 
 
      gridLines: { 
 
       display: true 
 
      }, 
 
      ticks: { 
 
       fontColor: '#000000', 
 
       callback: function(value) { 
 
        return value + "%" 
 
       } 
 
      }, 
 
      scaleLabel: { 
 
       display: false, 
 
       labelString: '', 
 
       fontColor: '#000000' 
 
      } 
 
     }] 
 
     } 
 
     //Scales Object Ends 
 
    } 
 
    //options object ends 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart2"></canvas>

関連する問題