JavaScript：chart.jsで積立グラフでツールチップに合計値を表示したい。

Question

chart.jsを使い、積立棒グラフを作成しました。ツールチップに各要素のラベルと数字を表示しているのですが、これに合計値を追加したいです。

 var ctx = document.getElementById("LineChart").getContext('2d');
 var chart = new Chart(ctx, {
    type: "bar",
    data:{
      labels:["1月","2月","3月","4月","5月","6月","7月"],
      datasets:[{
        label: '要素1',
        data:[4,5,9,14,,24,30],
      },
      {
        label: '要素2',
        data:[,1.5,1.9,1.4,1.5,2,4,3.0],
      }]
    },
    options:{
      tooltips: {
        mode: 'nearest',
        intersect: false,
        mode: 'index',
        callbacks: {
          label: (item, data) => {
            const { label } = data.datasets[item.datasetIndex];
            const value = item.value.replace('NaN', '');
            return value && `${label}: ${value}`;
          }
        }
      },
      scales:{
        xAxes:[{
          stacked: true
        }],
        yAxes:[{
          stacked: true
        }]
      }
    }
  });

２月
■要素１：５
■要素２：１.５

これに
２月
合計値：６.５　これを追加したいです。
■要素１：５
■要素２：１.５

Answer 1

こんにちは

ツールチップコールバック の afterTitle を追加すればできるかと思います。

例えば、以下を追加するといかがでしょうか？

afterTitle: (items, data) => {
  const values = items.map(e => e.value !== 'NaN' ? +e.value : 0);
  return `合計値: ${values[0] + values[1]}`;
},

• **動作確認用 CodePen: ** https://codepen.io/jun68ykt/pen/JjPgbPQ?editors=1010

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

前回に引き続きありがとうございます。そして、助けてもらってばかりで大変申し訳ございません。
実はpythonで簡易的なアプリを作成しているのですが、フロントが全く分からず苦戦しております。

ご提示いただいたコードなのですが、サンプルコードでは動作が確認出来たのですが、こちらでpythonで変数としてデータを渡すと、ちょっと上手くいかないようでございます。

[jun68ykt]

なるほどですね。
つまり、状況としては、

グラフのデータを返す API をサーバーサイドに （Djangoなどで）用意してあり、フロントからそれを呼んで成功で返ってきた（JSONだったりの）データを Chart のコンストラクタに渡すところがうまくいってないらしく、グラフが表示されない

という感じでしょうか？

[退会済みユーザー]

コメントありがとうございます。
状況としましては、前回質問文の内容までは、こちらの環境でもきちんと動作しております。
データもキッチリと渡せており、ツールチップ表示されました。
現時点で上手く行ってないのは、合計値の表示のみであります。

[退会済みユーザー]

ちなみに、labelにつきましては、リストで渡し、それをfor文でループさせているのですが、取り出したデータの1個目のみ合計値が表示されていました。

[jun68ykt]

ご返信ありがとうございます。なんとも悩ましい状況ですね。

このご質問に挙げられているJSのみのコードを対象にした本題である、

２月
合計値：６.５　これを追加したいです。
■要素１：５
■要素２：１.５

は解決したのでしたら、いったんこのご質問は解決済みにして、サーバーサイドから受け取った値を代入しているコードも含めて、（質問のタグに、Django なども付けて、）新たなご質問にされたほうが解決が早いかもしれません。

[退会済みユーザー]

了解致しました。
ご丁寧にありがとうございます。
折角ですので、一応こちらの質問文に追記するので見ていただいてもよろしいでしょうか？

[jun68ykt]

追記のほう拝読しました。問題の原因になってそうな箇所が分かりましたら、またコメントします。

[退会済みユーザー]

ご丁寧にありありがとうございます。
感謝の言葉しかありません。

[退会済みユーザー]

お世話になっております。
やはり難しいでしょうか？

[jun68ykt]

申し訳ありません。どこに間違いがあるのかが分かりませんでした。

[退会済みユーザー]

とんでもないです。
親身になって頂き大変感謝しています。
もし、他に解決に繋がりそうな情報が有れば追記しますが、いかがでしょうか？

[退会済みユーザー]

理由が何となく分かったですが、サンプルコードの方は要素が２つに限定していますが、こちらは要素がそれ以上であるため、きっちり動作しないように思えるのですが、いかがでしょうか？

Answer 2

var ctx = document.getElementById("LineChart").getContext('2d');
 var gc1 = [4,5,9,14,,24,30];
 var gc2 = [,1.5,1.9,1.4,1.5,2,4,3.0];
 var chart = new Chart(ctx, {
    type: "bar",
    data:{
      labels: ["1月\n合計値："+gc1[0],"2月\n合計値："+gc1[1]+gc2[1],"3月\n合計値："+gc1[2]+gc2[2],"4月\n合計値："+gc1[3]+gc2[3],"5月\n合計値："+gc2[4],"6月\n合計値："+gc1[5]+gc2[5],"7月\n合計値："+gc1[6]+gc2[6]],
      datasets:[{
        label: '要素1',
        data: gc1,
      },
      {
        label: '要素2',
        data: gc2,
      }]
    },
    options:{
      tooltips: {
        mode: 'nearest',
        intersect: false,
        mode: 'index',
        callbacks: {
          label: (item, data) => {
            const { label } = data.datasets[item.datasetIndex];
            const value = item.value.replace('NaN', '');
            return value && `${label}: ${value}`;
          }
        }
      },
      scales:{
        xAxes:[{
          stacked: true
        }],
        yAxes:[{
          stacked: true
        }]
      }
    }
  });

Comments

[kyoya0819]

サンプル : https://codepen.io/asuchi0819/pen/YzKmGYo?editors=0010#0

[退会済みユーザー]

早速のアドバイスありがとうございます。
こちらの説明不足で申し訳ないのですが、最終的にはdjangoを使い、各データをサーバーサイドから変数として受け渡したいのですが、その場合は難しいでしょうか？