質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chart.js 2.0 棒グラフに任意のTooltipを常時表示したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,933

tera_ina

score 4

前提・実現したいこと

Chart.js 2.0 で棒グラフを実装しました。 
各棒グラフ上部センターにデフォルトのTooltipとは別に
以下のように項目に任意の文字列を常時表示させたいと考えております。
![イメージ説明
マニュアル上ではこの点についての記述を見つけられず
方法をご教示いただければ幸いです。

補足情報(言語/FW/ツール等のバージョンなど)

利用バージョン:Chart.js  2.4.0

試したこと

別CANVASに吹き出しを書込み合成してみましたが
レスポンシブにしているため画面サイズ変更に伴う
グラフサイズ変更時の座標がずれてしまい
Chart.js自体(Tooltip等)で処理しようと考えました。

2017/04/10追記

<以下記載のScript表示結果>
※Januaryにマウスオーバーしたとき
イメージ説明
<解決できた点>
特定のBarのTooltipsを常時表示する
<問題点>
1.他のBarもマウスオーバーすると結局Tooltipsが表示されてしまう。
2.Tooltipsに任意の文字列を表示することができない。
(不要なMarchや判例の■マークが残ってしまう)
3.Barのセンター上部に表示したいが右斜め上に表示されてしまう。
(複数表示の際にTooltipsが重ならないようにするため)

<div class="chart_container"><canvas id="myChart" width="320" height="180"></canvas></div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

var cnt;
Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data:  chart.data,
                        _options: chart.options.tooltips,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            cnt = 1;
            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
              if (cnt == 3){ //例として3つ目のBarのみ表示するように設定
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
                chart.options.tooltips.enabled = true;
              }
              cnt = cnt +1;
            });
     }
   }
})

var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
           tooltips: {
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return 'AAA'; 
                    }
                }
            },
        showAllTooltips: true,
    barPercentage:1, responsive: true,
          legend: { display: false },
    scales: {
          xAxes: [{ display: true, stacked: false, gridLines: { display: false } }],
          yAxes: [{ display: true, 
                    scaleLabel: { display: true, labelString: 'Y LABEL', fontFamily: 'monospace', fontSize: 14 },
                    ticks: { max: 100, min: 0, stepSize: 20}
                 }]
        }
  }
});
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

【Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法 | Webスクリプターがつぶやくブログ】
http://blog2.gods.holy.jp/?eid=201

↑ こんな感じでしょうか?


追記:

                //chart.options.tooltips.enabled = true;
                chart.options.tooltips.enabled = false; // ← 
                callbacks: {
                    label: function(tooltipItems, data) { 
                        //return 'AAA';
                        return;   // ← 
                    },
                    title: function(tooltipItems, data) { 
                        return 'AAA';
                    }

動くサンプル:https://jsfiddle.net/b3w5gnqq/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/09 10:33 編集

    kei344様 ありがとうございます。
    当該URLは見ていたのですがChart.js 2.0以降での
    表記方法がわからず実現できませんでした。
    2.0以降で棒グラフは以下のように呼び出しております。
    var ctx = document.getElementById('myChart').getContext('2d');
    var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
    });
    ご教示頂ければ幸いです。

    キャンセル

  • 2017/04/09 11:41

    あぁ、それは失礼しました。では下記のあたりを試してみては?

    【How do I get tooltips to always show in V2? · Issue #1861 · chartjs/Chart.js · GitHub】
    https://github.com/chartjs/Chart.js/issues/1861

    キャンセル

  • 2017/04/09 19:55

    ありがとうございました。お陰様でTooltipsの常時表示を行う事ができました。
    後は、特定のBarのみ、任意の文字列を表示できれば良いのですが、
    前者(特定のBarのみ)については、特定のBarのみ常時表示することはできたのですが
    他のBarもマウスオーバーすると結局表示されてしまう現象を解消できませんでした。
    後者の任意の文字列については全く解決することができない状況です。
    Tooltipsで表示される内容の配列などを直接設定できればと思うのですが
    解決策が見いだせない状況です。ご教示いただくことは可能でしょうか。

    キャンセル

  • 2017/04/10 10:20

    質問文にコードを書くなりしてください。どう出来たかもわからない状態でのアドバイスは出来ません。

    キャンセル

  • 2017/04/10 10:38 編集

    大変失礼しました。

    キャンセル

  • 2017/04/10 13:19

    「質問文」に追記してください。

    キャンセル

  • 2017/04/10 14:29

    ご指摘ありがとうございます。質問文を更新しました。

    キャンセル

  • 2017/04/10 15:06

    本当にありがとうございます!おかげさまで実現できました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。