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 %
をツールチップに表示する必要があります。あらゆる知識が評価されます。ありがとう。