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

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

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

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

Q&A

解決済

1回答

19867閲覧

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

tera_ina

総合スコア13

JavaScript

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

0グッド

1クリップ

投稿2017/04/09 01:04

編集2017/04/10 05:28

###前提・実現したいこと
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が重ならないようにするため)

JavaScript

1<div class="chart_container"><canvas id="myChart" width="320" height="180"></canvas></div> 2<script> 3var ctx = document.getElementById('myChart').getContext('2d'); 4var data = { 5 labels: ["January", "February", "March", "April", "May", "June", "July"], 6 datasets: [ 7 { 8 label: "My First dataset", 9 backgroundColor: [ 10 'rgba(255, 99, 132, 0.2)', 11 'rgba(54, 162, 235, 0.2)', 12 'rgba(255, 206, 86, 0.2)', 13 'rgba(75, 192, 192, 0.2)', 14 'rgba(153, 102, 255, 0.2)', 15 'rgba(255, 159, 64, 0.2)' 16 ], 17 borderColor: [ 18 'rgba(255,99,132,1)', 19 'rgba(54, 162, 235, 1)', 20 'rgba(255, 206, 86, 1)', 21 'rgba(75, 192, 192, 1)', 22 'rgba(153, 102, 255, 1)', 23 'rgba(255, 159, 64, 1)' 24 ], 25 borderWidth: 1, 26 data: [65, 59, 80, 81, 56, 55, 40], 27 } 28 ] 29}; 30 31var cnt; 32Chart.pluginService.register({ 33 beforeRender: function (chart) { 34 if (chart.config.options.showAllTooltips) { 35 // create an array of tooltips 36 // we can't use the chart tooltip because there is only one tooltip per chart 37 chart.pluginTooltips = []; 38 chart.config.data.datasets.forEach(function (dataset, i) { 39 chart.getDatasetMeta(i).data.forEach(function (sector, j) { 40 chart.pluginTooltips.push(new Chart.Tooltip({ 41 _chart: chart.chart, 42 _chartInstance: chart, 43 _data: chart.data, 44 _options: chart.options.tooltips, 45 _active: [sector] 46 }, chart)); 47 }); 48 }); 49 50 // turn off normal tooltips 51 chart.options.tooltips.enabled = false; 52 } 53 }, 54 afterDraw: function (chart, easing) { 55 if (chart.config.options.showAllTooltips) { 56 // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 57 if (!chart.allTooltipsOnce) { 58 if (easing !== 1) 59 return; 60 chart.allTooltipsOnce = true; 61 } 62 63 cnt = 1; 64 // turn on tooltips 65 chart.options.tooltips.enabled = true; 66 Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 67 if (cnt == 3){ //例として3つ目のBarのみ表示するように設定 68 tooltip.initialize(); 69 tooltip.update(); 70 // we don't actually need this since we are not animating tooltips 71 tooltip.pivot(); 72 tooltip.transition(easing).draw(); 73 chart.options.tooltips.enabled = true; 74 } 75 cnt = cnt +1; 76 }); 77 } 78 } 79}) 80 81var myChart = new Chart(ctx, { 82 type: 'bar', 83 data: data, 84 options: { 85 tooltips: { 86 callbacks: { 87 label: function(tooltipItems, data) { 88 return 'AAA'; 89 } 90 } 91 }, 92 showAllTooltips: true, 93 barPercentage:1, responsive: true, 94 legend: { display: false }, 95 scales: { 96 xAxes: [{ display: true, stacked: false, gridLines: { display: false } }], 97 yAxes: [{ display: true, 98 scaleLabel: { display: true, labelString: 'Y LABEL', fontFamily: 'monospace', fontSize: 14 }, 99 ticks: { max: 100, min: 0, stepSize: 20} 100 }] 101 } 102 } 103}); 104</script>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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


追記:

JavaScript

1 //chart.options.tooltips.enabled = true; 2 chart.options.tooltips.enabled = false; // ←

JavaScript

1 callbacks: { 2 label: function(tooltipItems, data) { 3 //return 'AAA'; 4 return; // ← 5 }, 6 title: function(tooltipItems, data) { 7 return 'AAA'; 8 } 9```**動くサンプル:**[https://jsfiddle.net/b3w5gnqq/](https://jsfiddle.net/b3w5gnqq/)

投稿2017/04/09 01:18

編集2017/04/10 05:58
kei344

総合スコア69498

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tera_ina

2017/04/09 01:34 編集

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 }); ご教示頂ければ幸いです。
tera_ina

2017/04/09 10:55

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

2017/04/10 01:20

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

2017/04/10 05:29 編集

大変失礼しました。
kei344

2017/04/10 04:19

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

2017/04/10 05:29

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

2017/04/10 06:06

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問