Как считать процент в Chart js?

Question

[Сергей БАрд]

Вопрос по Chart js, мне нужно считать на каждой точке процент прироста или уменьшения по сравнению с предыдущей точкой, например вот как мне нужно

var percent   =  round( (( dataPoint.yLabel / dataPoint[index-1].yLabel - 1 ) * 100), 2 );
//где  dataPoint[index-1].yLabel - показатель точки на шаг назад
 $tooltip.html(  content + "<br>" + qwert + "<br>" + percent);

но проблема в том что я не знаю как взять показатель пред. точки примерно таким образом dataPoint[index-1].yLabel
Подскажите пожалуйста кто уже работал с подобной задачей

Вот полный пример кода

<canvas id="myChart"></canvas>
<div class="chartTooltip">
    <div class="chartjs-tooltip tooltip-0"></div>
    <div class="chartjs-tooltip tooltip-1"></div>
</div>
<div id="legend" class="legend"></div>

<script>
    var chart = new Chart(document.getElementById("myChart"), {
                        type: "line",
                        data:{
                            labels: [
                            "<?=$all_data;?>"
                            ],
                            datasets: [{
                                label: "Текущий - общий",
                                 fill: false,
                                backgroundColor: "rgb(255, 99, 132)",
                                borderColor: "rgb(255, 99, 132)",
                                pointBackgroundColor: "rgb(255, 99, 132)",
                                data: [
                                    <?=$all_total;?>
                                ]
                            },{
                                label: "Предыдущий - общий",
                                 fill: false,
                                backgroundColor: "rgb(230, 66, 63)",
                                borderColor: "rgb(230, 66, 63)",
                                pointBackgroundColor: "rgb(230, 66, 63)",
                                data: [
                                    <?=$all_total_prev_day;?>
                                ]
                            }
                        ]},
                        options: {
                            title:{
                                display: true,
                                text: "Сравнение 10 дней с предыдущими"
                            },  
                            responsive: true,
                            legend: {
                                display: false
                            },
                            tooltips: {
                                enabled: false,
                                intersect: false,
                                custom: function (tooltip) {
                                        $(this._chart.canvas).css("cursor", "pointer");
                                        $(".chartTooltip").find(".chartjs-tooltip").css({
                                            opacity: 0,
                                        });
                                        if (!tooltip || !tooltip.opacity) {
                                            return;
                                        }
                                        if (tooltip.dataPoints.length > 0) {
                                            tooltip.dataPoints.forEach(function (dataPoint, index) {
                                                var qwert;
                                                var content;
                                                var percent;
                                                content = [dataPoint.yLabel, "sessions"].join(":  ");
                                                    var arrrr0q = ["<?=$all_date_start;?>"];
                                                    var arrrr1q = ["<?=$all_date_start_prev;?>"];
                                                    
                                                if( dataPoint.datasetIndex == 0 ){
                                                    qwert = arrrr0q[dataPoint.index];
                                                }
                                                if( dataPoint.datasetIndex == 1 ){
                                                    qwert = arrrr1q[dataPoint.index];
                                                }

                                                var $tooltip = $(".chartTooltip").find(".tooltip-" + dataPoint.datasetIndex);
                                                $tooltip.html(  content + "<br>" + qwert );
                                                if( dataPoint.x > 700 ){
                                                    dataPoint.x = 700;
                                                }
                                                if( dataPoint.x < 130 ){
                                                    dataPoint.x = 150;
                                                }
                                                $tooltip.css({
                                                    opacity: 1,
                                                    top:  dataPoint.y + "px",
                                                    left: dataPoint.x + "px",
                                                });
                                            });
                                        }              
                                    },
                            },
                            hover: {
                                mode: 'point',
                                intersect: false
                            },
                        }
                    });
    $('#legend').html(chart.generateLegend());
    $("#legend").on('click', "li", function(){
      var i = $(this).index()
      chart.data.datasets[i].hidden = !chart.data.datasets[i].hidden;
      chart.update();
    });
</script>

Answer 1

[Stepanya]

Вы когда данные устанавливаете, подготовьте их, добавьте к ним поле с подсчитанным процентом.