Chart.jsにてデータの一部にチップツールを常時表示したい。

chart.jsを用いて添付画像のような"最新"という表示を作りたいのですが、なかなかうまく行きません。

最悪チップツールのみを外部ライブラリを用いて表示しようかと思ったのですが、そもそも右端グラフの最上部の座標を取得することができず断念しました。

お手数ですが、ご存じの方がおられましたらご教示していただきたいです。
ちなみにですが、ホバーした際のチップツールは非表示のままにしたいです。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>title</title>
8  </head>
9  <body>
10    <canvas id="chart"></canvas>
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
12    <script>
13      (function () {
14        "use strict";
15        var type = "bar";
16
17        var data = {
18          labels: [0, 1, 2, 3],
19          datasets: [
20            {
21              label: "AAA",
22              data: [100, 200, 221, 350],
23              backgroundColor: "green",
24            },
25            {
26              label: "BBB",
27              data: [100, 200, 221, 350],
28              backgroundColor: "skyblue",
29            },
30            {
31              label: "CCC",
32              data: [100, 200, 221, 350],
33              backgroundColor: "red",
34            },
35          ],
36        };
37
38        var options = {
39          scales: {
40            xAxes: [
41              {
42                stacked: true,
43                scaleLabel: {
44                  display: true,
45                },
46              },
47            ],
48            yAxes: [
49              {
50                stacked: true,
51                scaleLabel: {
52                  display: true,
53                },
54              },
55            ],
56          },
57          tooltips: { enabled: false },
58          hover: { mode: null },
59        };
60
61        var ctx = document.getElementById("chart").getContext("2d");
62        var myChart = new Chart(ctx, {
63          type: type,
64          data: data,
65          options: options,
66        });
67      })();
68    </script>
69  </body>
70</html>
71

行動規範の内容に同意します

回答1件

ベストアンサー

単純に、チャートエリアの良さげな位置に固定の画像を貼るのであれば、こんな感じでしょうか。

<div>
  <canvas id="chart" style="border: solid 1px; width: 800px; height: 600px"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script>

  let tooltipImg = new Image();
  tooltipImg.src = '画像パス';

  const drawImagePlugin = {
    afterDraw: chart => {
      // bar stackの一番最後の要素の描画領域を取得
      const dataset = chart.config.data.datasets.slice(-1)[0];
      const i = chart.config.data.datasets.length - 1;
      const meta = chart.controller.getDatasetMeta(i);
      const bar = meta.data.slice(-1)[0];
      const index = meta.data.length - 1;
      const data = dataset.data[index];
      const xPos = bar._model.x;
      const yPos = bar._model.y;
      // 貼り付ける画像のサイズを棒グラフに合わせて調整する。
      const b_w = bar._model.width;
      const b_h = tooltipImg.height * b_w / tooltipImg.width;
      const context = document.getElementById('chart').getContext('2d');
      context.drawImage(tooltipImg, xPos - b_w / 2, yPos - b_h - 10, b_w, b_h);
    }
  }

  Chart.pluginService.register(drawImagePlugin);

  const config = {
    type: "bar",
    data: {
      labels: [0, 1, 2, 3],
      datasets: [
        {
          label: "AAA",
          data: [100, 200, 221, 350],
          backgroundColor: "green",
        },
        {
          label: "BBB",
          data: [100, 200, 221, 350],
          backgroundColor: "skyblue",
        },
        {
          label: "CCC",
          data: [100, 200, 221, 350],
          backgroundColor: "red",
        },
      ],
    },
    options: {
      scales: {
        xAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
            },
          },
        ],
        yAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
            },
          },
        ],
      },
      responsive: true,
      tooltips: {
        enabled: false,
      },
      hover: { mode: null },
      animation: false,
    }
  };

  tooltipImg.addEventListener("load", () => {
    const ctx = document.getElementById('chart').getContext('2d');
    tooltipImg.width = tooltipImg.naturalWidth;
    tooltipImg.height = tooltipImg.naturalHeight;
    new Chart(ctx, config);
  }, false);
</script>

ツールチップを固定表示するのであれば、よくみかける下記の手法で対応できます。（ツールチップの形を質問記載の画像に似せるところまでは回答範囲外と考えるので対応していません）

<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
  <script>
    "use strict";
    const type = "bar";
    const data = {
      labels: [0, 1, 2, 3],
      datasets: [
        {
          label: "AAA",
          data: [100, 200, 221, 350],
          backgroundColor: "green",
        },
        {
          label: "BBB",
          data: [100, 200, 221, 350],
          backgroundColor: "skyblue",
        },
        {
          label: "CCC",
          data: [100, 200, 221, 350],
          backgroundColor: "red",
        },
      ],
    };

    Chart.pluginService.register({
      beforeRender: chart => {
        if (chart.config.options.showAllTooltips) {
          chart.pluginTooltips = [];
          chart.config.data.datasets.forEach((dataset, i) => {
            chart.getDatasetMeta(i).data.forEach(sector => {
              chart.pluginTooltips.push(new Chart.Tooltip({
                _chart: chart.chart,
                _chartInstance: chart,
                _data: chart.data,
                _options: chart.options.tooltips,
                _active: [sector]
              }, chart));
            });
          });

          chart.options.tooltips.enabled = false;
        }
      },
      afterDraw: (chart, easing) => {
        if (chart.config.options.showAllTooltips) {
          if (!chart.allTooltipsOnce) {
            if (easing !== 1)
              return;
            chart.allTooltipsOnce = true;
          }
          let cnt = 1;
          chart.options.tooltips.enabled = true;
          Chart.helpers.each(chart.pluginTooltips, tooltip => {
            if (cnt == chart.pluginTooltips.length) {  // 最後のスタック描画時だけツールチップを描く
              tooltip.initialize();
              tooltip.update();
              tooltip.pivot();
              tooltip.transition(easing).draw();
            }
            cnt = cnt + 1;
          });
          chart.options.tooltips.enabled = false;
        }
      }
    })

    const options = {
      scales: {
        xAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
            },
          },
        ],
        yAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
            },
          },
        ],
      },

      tooltips: {
        mode: 'index',
        caretSize: 10,
        titleFontSize: 24,
        xAlign: "center",
        yAlign: "bottom",
        bodySpacing: 100,
        backgroundColor: "yellowgreen",
        position: "customMode",
        cornerRadius: 20,
        callbacks: {
          label: (tooltipItems, data) => {
            return;
          },
          title: (tooltipItems, data) => {
            return '　　最新　　';
          }
        }
      },
      showAllTooltips: true,
      responsive: true,
      hover: { mode: null },
    };

    Chart.Tooltip.positioners.customMode = (elements, eventPosition) => {
      let x = 0;
      let y = 0;
      let count = 0;
      for (let el of elements) {
        if (el && el.hasValue()) {
          let pos = el.tooltipPosition();
          x += pos.x;
          y = pos.y;
          ++count;
        }
      }
      return {
        x: Math.round(x / count),
        y: Math.round(y / count) - 20
      };
    }

    const ctx = document.getElementById("chart").getContext("2d");
    const myChart = new Chart(ctx, {
      type: type,
      data: data,
      options: options,
    });
  </script>
</body>

投稿2021/05/10 16:53

編集2021/05/10 22:28

退会済みユーザー

総合スコア0

tmp-user

2021/05/11 10:06

ありがとうございます！まさにやりたいことでした！なかなか画像つきの情報が見つからず苦戦していたので、非常に助かりました・・・。後学に1つ追加でご質問させていただきたいのですが、後者のパターンですと、正円を作ることはできないのでしょうか？ cornerRadiusを変更すると楕円が崩れてしまいました。 ```HTML tooltips: { mode: "index", caretSize: 10, titleFontSize: 20, xAlign: "center", yAlign: "bottom", bodySpacing: 10, backgroundColor: "yellowgreen", position: "customMode", cornerRadius: 50, // 変更点 callbacks: { label: (tooltipItems, data) => { return; }, title: (tooltipItems, data) => { return "　　最新　　"; }, }, }, ``` イメージとしては、以下のような`Radius:100%`の円をこちらの方法でも作ってみたいです。 ```HTML <div class="circle"> <p id="text">最新</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <style> .circle { width: 100px; height: 100px; background: limegreen; border-radius: 100%; position: relative; } #text { position: absolute; top: 20%; left: 35%; } </style> ``` ちなみにですが、前者の画像イメージを入れ込む方法は、とても理想に近いものを作ることができました。ありがとうございます。

退会済みユーザー

2021/05/12 04:16 編集

その後も色々調べたり試したりしましたが、私が調べた限りでは・tooltips.options内でツールチップを正円にするためのプロパティ（borderRadius:100%等)がなさそう。・「ツールチップ固定表示」と「tooltips.options外でのツールチップstyleのカスタマイズ」を両立する方法が見つからない（ホバー時に表示されるツールチップに任意のスタイルシートを適用し正円にすることはできるが、それを今回の固定表示ツールチップに適用する方法がわからない [固定表示されるツールチップは、カスタマイズしたスタイルが適用されずデフォルトのスタイルになる]）という結果になりました。以上、よろしくお願いいたします

tmp-user

2021/06/05 13:25

ありがとうございます。私の調べ方が悪かったのかな、と不安でしたが解決できてとても嬉しいです。教えていただいた画像を貼るパターンを使うことにしました。この度はありがとうございました。

行動規範の内容に同意します