[MIXED CHART.JS] Как мне манипулировать надписью подсказок каждого графика? - PullRequest
Новая
       13

[MIXED CHART.JS] Как мне манипулировать надписью подсказок каждого графика?

0 голосов
/ 12 февраля 2019

Я хочу манипулировать значением label of 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>

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

если я правильно понимаю,
вы хотите, чтобы каждая подсказка отображалась отдельно,
в зависимости от того, какая подсказка отображается.

, поэтому показывать Использование энергии можно только при наведении линии,
и показывать Использование энергии * только при наведении баров.

если это так, удалите следующие параметры всплывающей подсказки, они не нужны.

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 голосов
/ 12 февраля 2019

Если я понимаю ожидаемый результат, будет выглядеть так:

PrintScreen

Для этого замените: 

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

на: 

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