[MIXED CHART.JS]如何操作每個圖表工具提示的標簽？

Question

我想操縱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> 

Answer 1

如果我了解預期的結果是這樣的：

打印屏幕

為此替換：

tooltips: {
                intersect: true,
[...]

帶有：

tooltips: {
                mode:'index',
                intersect: false
            }

Answer 2

如果我理解正確，
您想分別顯示每個工具提示，
取決於正在徘徊。

因此只有在線路懸停時才顯示電源使用情況 ，
並且僅在條形圖懸停時顯示“ 能源使用量 ”。

如果是這樣，請刪除以下工具提示選項，這些選項不是必需的。

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>