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
}()
num %
YAxesで作成したコールバック関数でわかるように、Y軸に数値を表示できますが、ツールチップを試してみると同じ結果にはなりません。num %
ツールチップにも表示できるようにする必要があります。どんな知識でもありがたいです。ありがとう。
ツールチップラベルのコールバック関数を使用%
して、データ値とともに記号を表示できます。
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加