我要操纵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>
答案 0 :(得分：0)
如果我了解预期的结果是这样的：
为此替换：
tooltips: {
intersect: true,
[...]
使用：
tooltips: {
mode:'index',
intersect: false
}
答案 1 :(得分：0)
如果我理解正确，
您想分别显示每个工具提示，
取决于正在徘徊。
因此，当鼠标悬停在行上时，仅显示电源使用情况，
并且仅在条形图悬停时显示能源使用量。
如果是这样，请删除以下工具提示选项，这些选项不是必需的。
mode: 'index',
intersect: false,
这将导致工具提示回调的label键仅被调用一次。
无需构建数组，只需使用单个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>