###前提・実現したいこと
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>

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2017/04/09 01:34 編集
2017/04/09 02:41
2017/04/09 10:55
2017/04/10 01:20
2017/04/10 05:29 編集
2017/04/10 04:19
2017/04/10 05:29
2017/04/10 06:06