[MIXED CHART.JS]如何操作每个图表工具提示的标签？

问题描述 投票：1回答：2

我想操纵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>
javascript charts chart.js
2个回答
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>
0
投票

如果我理解预期的结果是这样的：

PrintScreen

为了替换：

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

附：

tooltips: {
                mode:'index',
                intersect: false
            }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.