chart.jsのラベルの値を操作したい
ドットにカーソルを合わせる
Energy/Power Usage: valueThatWantToBeManipulatedテキストを見てください
Energy Usage折れ線グラフに属し、その逆も同様です。分けておきたい
ツールチップに「エネルギー/電力使用量」のテキストを残したいのですが、値は操作できます
コメントアウトしたコードが機能していません
var el = document.getElementById("chart").getContext('2d'),
type = 'bar';
var lineDataSets = {
labels: ["00.00","01.00","02.00","03.00","04.00","05.00","06.00","07.00","08.00","09.00","10.00","11.00","12.00","13.00","14.00","15.00","16.00","17.00","18.00","19.00","20.00","21.00","22.00","23.00"],
datasets: [{
type: 'line',
label: 'Power Usage',
data: [0,0,32,445,330,266,192,176,166,391,4508,4255,8454,4086,212,320,352,251,30,0,0,0,0,1],
backgroundColor: 'red',
borderColor: 0,
},{
type: 'bar',
label: 'Energy Usage',
data: [0,0,"35107","207168","202928","199310","196741","194544","192591","189412","215928","258937","226003","181577","185986","182449","178411","174656","130098",0,0,0,0,"14531"],
backgroundColor: 0,
borderColor: 0,
}]
}
var hourTooltipCallbackLine = ["04 February 2019 00:00","04 February 2019 01:00","04 February 2019 02:00","04 February 2019 03:00","04 February 2019 04:00","04 February 2019 05:00","04 February 2019 06:00","04 February 2019 07:00","04 February 2019 08:00","04 February 2019 09:00","04 February 2019 10:00","04 February 2019 11:00","04 February 2019 12:00","04 February 2019 13:00","04 February 2019 14:00","04 February 2019 15:00","04 February 2019 16:00","04 February 2019 17:00","04 February 2019 18:00","04 February 2019 19:00","04 February 2019 20:00","04 February 2019 21:00","04 February 2019 22:00","04 February 2019 23:00"]
var lineChartOptions = {
animation: {
easing: 'easeInOutBack'
},
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: function (tooltipItem, data) {
var arrDateTooltip = new Array();
tooltipItem.forEach(function (value, index) {
arrDateTooltip.push(hourTooltipCallbackLine[value.index])
})
return arrDateTooltip;
},
// label: function (tooltipItem, data) {
// var arrLabelTooltip = new Array();
// var dataSetsLabel = data.datasets.forEach(function (value, index) {
// var word = value.label + ":" + value.data[index];
// arrLabelTooltip.push(word)
// })
// return arrLabelTooltip
// }
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
new Chart(el, {
type: type,
data: lineDataSets,
options: lineChartOptions
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div>
<canvas id="chart"></canvas>
</div>私が正しく理解していれば、
ホバーされているツールチップに
応じて、各ツールチップを個別に表示する必要があります。
したがって、ラインがホバーされたときにのみ電力使用量を
表示し、バーがホバーされたときにのみエネルギー使用量を表示します。
その場合は、次のツールチップオプションを削除してください。これらは不要です。
mode: 'index',
intersect: false,
これlabelにより、ツールチップコールバックのキーが1回だけ呼び出されます。
配列を作成する必要はありません。単一tooltipItemを使用して、表示する値を作成するだけです。
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ":" + tooltipItem.yLabel;
}
次の作業スニペットを参照してください...
$(document).ready(function() {
var el = document.getElementById("chart").getContext('2d'),
type = 'bar';
var lineDataSets = {
labels: ["00.00","01.00","02.00","03.00","04.00","05.00","06.00","07.00","08.00","09.00","10.00","11.00","12.00","13.00","14.00","15.00","16.00","17.00","18.00","19.00","20.00","21.00","22.00","23.00"],
datasets: [{
type: 'line',
label: 'Power Usage',
data: [0,0,32,445,330,266,192,176,166,391,4508,4255,8454,4086,212,320,352,251,30,0,0,0,0,1],
backgroundColor: 'red',
borderColor: 0,
},{
type: 'bar',
label: 'Energy Usage',
data: [0,0,"35107","207168","202928","199310","196741","194544","192591","189412","215928","258937","226003","181577","185986","182449","178411","174656","130098",0,0,0,0,"14531"],
backgroundColor: 0,
borderColor: 0,
}]
}
var hourTooltipCallbackLine = ["04 February 2019 00:00","04 February 2019 01:00","04 February 2019 02:00","04 February 2019 03:00","04 February 2019 04:00","04 February 2019 05:00","04 February 2019 06:00","04 February 2019 07:00","04 February 2019 08:00","04 February 2019 09:00","04 February 2019 10:00","04 February 2019 11:00","04 February 2019 12:00","04 February 2019 13:00","04 February 2019 14:00","04 February 2019 15:00","04 February 2019 16:00","04 February 2019 17:00","04 February 2019 18:00","04 February 2019 19:00","04 February 2019 20:00","04 February 2019 21:00","04 February 2019 22:00","04 February 2019 23:00"]
var lineChartOptions = {
animation: {
easing: 'easeInOutBack'
},
legend: {
display: false
},
tooltips: {
callbacks: {
title: function (tooltipItem, data) {
var arrDateTooltip = new Array();
tooltipItem.forEach(function (value, index) {
arrDateTooltip.push(hourTooltipCallbackLine[value.index])
});
return arrDateTooltip;
},
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ":" + tooltipItem.yLabel;
}
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
new Chart(el, {
type: type,
data: lineDataSets,
options: lineChartOptions
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart"></canvas>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加