Chart.jsでツールチップを再フォーマットする方法は?チャートはx軸を時間軸、y軸を売上量、ツールチップをx軸とy軸の両方に表示します。これまでのところ、ツールチップはデフォルトで動作しますが、ツールチップに表示される値を変更したいと考えています。 tooltipFormatフィールドを 'time'に再定義することで、ツールチップの時刻を再フォーマットすることができます。しかし、私はy軸のデータには似たようなものは見つけられません。たとえば、 "Daily Ticket Sales:1600"の代わりに "$ 1600"を表示します。
example tooltip format imageChart.jsでツールチップを再フォーマットする方法は?
どこの人がその変更を行うべきか教えてください。
「カスタム」コールバック関数はここで問題を解決できますか?コードはありがとう!
var dates=data.linechart.dates;
var times=[];
for (var i=0; i<dates.length; i++) {
times.push(moment(dates[i],'YYYY/MM/DD'));
}
// console.log(dates);
// console.log(times);
var salesData = {
labels: times,
datasets: [
{
label: "Daily Ticket Sales",
fill: false,
lineTension: 0,
backgroundColor: "#fff",
borderColor: "rgba(255,88,20,0.4)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255,88,20,0.4)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255,88,20,0.4)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 3,
pointHitRadius: 10,
data: data.linechart.sales,
}
]
};
var ctx = document.getElementById("daily_sale").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: salesData,
options: {
showLines: true,
responsive: true,
legend:{display:false},
tooltips:{
// backgroundColor:'rgba(0,255,0,0.8)',
custom: function(tooltip) {
// tooltip will be false if tooltip is not visible or should be hidden
if (!tooltip) {
return;
}
else{
console.log(tooltip);
}
}
},
scales:
{
xAxes: [{
type: "time",
time: {
displayFormat:'MM/DD/YY',
tooltipFormat: 'MM/DD/YY',
// unit: 'day',
}
}],
yAxes: [{
ticks:{ userCallback: function(value, index, values) {
// $ sign and thousand seperators
return '$'+value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
},
}],
},
}
});
ありがとうございます、それは魔法のように機能します! –