Chart.jsで表示させているグラフの平均線の値とグラフ下の平均値の値が一致しません。原因とすべきことはわかっているのですがなかなかうまく行きません。ご助言お願いします！

Question

###Chart.jsで表示させのテキストているグラフの平均線の値とグラフ下の平均値の値が一致しません。原因とすべきことはわかっているのですがなかなかうまく行きません。ご助言お願いします！

[前提知識]

添付画像の通り、平均線の値とグラフ下の平均値の値が一致していないので一致させたいです。
実装方法はjavascriptのChart.jsです。

▼質問内容
口コミ分析画面の「口コミ数」「平均点数」の過去1年と前年比グラフ下の数値の計算でグラフバーの本数の数を使用したいです。
つまり、以下のような計算の際の12の部分をグラフバーの本数を入れたいです。
let average = ((Math.round(sum * 10)) / 10) / 12 ;
いい方法があればご教示いただきたいです。
最後に参考にして欲しいコードを一部添付しておきますので御助言をお願いしたいです。
もちろん、コードを全て添付しないのでわからない部分などあればコメントしていただければ添付します。
よろしくお願いいたします。

▼問題点
口コミ分析画面で平均値と平均線がの数値が合いません
▼原因
グラフ下の平均値の数値の出し方の計算でグラフバーの本数を12で割ってしまっているので、グラフバーが１２本よりも少ない場合は数値が合わなくなってしまいます。
ちなみに、うまく出力できている平均線の場合は以下のような計算方法になっています。

resources/assets/js/review_chart.js
グラフ下の平均値を表示するコードになります。
   let average = ((Math.round(sum * 10)) / 10) / 12 ;
上記のコードの12の部分をグラフのバーの本数を入れて計算させたいです。

let averageArr = [];
                const START_MONTH = 0;
                const END_MONTH = 12;
                $.each(stackTotal, function (key, value) {
                    let sum = 0;
                    for (let i = START_MONTH; i < END_MONTH; i++) {
                        sum = sum +  value[i];
                    }
                    let average = ((Math.round(sum * 10)) / 10) / 12 ;
                    // let average = ((Math.round(firstAverage) * 10) / 10);
                    // let average = ((Math.round(sum / firstAverage) * 10) / 10);
                    // let average = ((Math.round(sum * 10)) / 10) / firstAverage ;
                    averageArr.push(average);
                });

                console.log(averageArr[0]);
                template.push('<div class="d-flex flex-row mt-15 text-color-4D4F5C">');
                template.push('<div class="col-wrapper pr-20">');
                template.push('<div class="d-flex align-items-center">');
                template.push(`<span class='dot-square-c7c6ce margin-right-10'></span>`);
                template.push(`<span class='dot-square-a0c2f9 margin-right-10'></span>`);
                template.push(`<span class="font-size-14 label-table">平均値</span>`);
                template.push('</div>');
                template.push('<div class="d-flex flex-row">');
                template.push('<div class="d-flex flex-column margin-right-16">');
                template.push(`<span class="font-size-10 color-gray">前年</span>`);
                template.push(`<span class="font-size-20 data-table">
                    ${ parsePotentiallyGroupedFloat(numeral(averageArr[0]).format(firstAverage ? '0,0.0' : '0,0.0')) === 0 ? 0 : numeral(averageArr[0]).format(firstAverage ? '0,0.0' : '0,0.0')}
                </span>`);
                template.push('</div>');
                template.push('<div class="d-flex flex-column">');
                template.push(`<span class="font-size-10 color-gray">今年</span>`);
                template.push(`<span class="font-size-20 ${ getColorTextMonthCurrentYear(parsePotentiallyGroupedFloat(numeral(averageArr[0]).format(isTableStar ? '0,0.0' : '')),parsePotentiallyGroupedFloat(numeral(averageArr[1]).format(isTableStar ? '0,0.0' : '')))} data-table">
                    ${ parsePotentiallyGroupedFloat(numeral(averageArr[1]).format(isTableStar ? '0,0.0' : '')) === 0 ? 0 : numeral(averageArr[1]).format(isTableStar ? '0,0.0' : '')}
                </span>`);

app/Services/ReviewAnalysisService.php
ちなみに以下のコードは、平均線の数値を計算、定義しているコードになります。ここで定義した平均線で使用する値はjavascript内の、Annotaionで取得しています。

        $thisYearAverage = self::getAverageArray(
            array_merge($oneYearGoogleSub11MonthReports, $oneYearFbSub11MonthReports)
        );
        $lastYearAverage = self::getAverageArray(
            array_merge($oneYearGoogleLaterSub11MonthReports, $oneYearFbLaterSub11MonthReports)
        );

...
以下のコードで、グラフのバーの本数で割り平均値を計算できているコードが完成します。
    public static function getAverageArray($array)
    {
        if ($count = count(array_filter($array, function ($n) {
            return $n != 0;
        }))) {
            return array_sum($array) / $count;
        }
        return 0;
    }

Answer 1

配列valueの中に値が入っていて、値が0ではない最初の月を開始月として平均を出したい。
というのであればこれでどうでしょうか。

const months = END_MONTH - START_MONTH - value.findIndex(v=>v!=0);
const average = Math.round(sum * 10 / months) / 10;

今回のケースでは値が全部0だと普通に平均が0になるので気にしなくてもいいですが、
場合によってはfindIndexの結果が-1になる時の対応も必要になります。

Comments

[suirunakamura]

AT_2ndさん、回答ありがとうございます！
参考にさせていただきます！