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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

Q&A

0回答

1759閲覧

積み上げ棒グラフでのみformatterが機能しない

BKG

総合スコア13

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

0グッド

0クリップ

投稿2020/12/14 11:20

railsでgem "lazy_high_charts"を使用しています。
積み上げグラフを使用する際、highcharts.tooltip.formatterが機能していません。
必要な設定値などがあればご教示ください。

以下のようなコードでツールチップを表示しようと思っています。
初期化します。stacking_typeは積み上げ時は'normal'、並列時は''です。
heightとcolorsは適当な値で問題ありません。

chart = LazyHighCharts::HighChart.new() do |f| f.chart height: height f.colors colors f.plotOptions column: {stacking: stacking_type} f.legend f.tooltip shared: true end

xAxisのcategoriesは以下のように複数の値を持っています。
グラフ上での表示には最初の値のみ使用したいため、formatterを使用して表示を操作しています。
this.value[0]とすることで、グラフのカテゴリ名は"x件目のグラフ"の名称表示ができています。

js

1categories = [ 2 ["1件目のグラフ", "1件目の内部データ1", "1件目の内部データ2"], 3 ["2件目のグラフ", "2件目の内部データ1", "2件目の内部データ2"], 4 ["3件目のグラフ", "3件目の内部データ1", "3件目の内部データ2"], 5] 6chart.xAxis( 7 categories: categories, 8 labels: { 9 formatter: %q|function(){return '<span>' + this.value[0] + '</span>';}|.js_code, 10 useHTML: true, 11 } 12)

ツールチップのフォーマットを設定します。
formatter内ではJSのコードが使用可能であるため、以下のように表示を成型しています。
ツールチップでもxAxisと同様に、categoryの最初の値のみ使用したいです。

js

1formatter = %Q|function(){ 2 var tip = ''; 3 tip += '<span>' + this.x[0] + '</span><br/>'; 4 $.each(this.points, 5 function(index, p) { 6 tip += '<span style="color:' + p.series.color + '">●</span> ' + p.series.name + ': <b>' + p.point.y + '</b><br/>'; 7 } 8 ); 9 tip += '<span>フッター文字</span>' 10 return tip; 11}|.js_codechart.tooltip( 12 shared: true, 13 reversed: true, 14 useHTML: true, 15 formatter: formatter, 16)

上記のツールチップ設定で、通常の並列グラフは正常にツールチップが表示され、categoryの値も最初の値のみ表示できています。
しかし積み上げグラフではformatterの設定が無視され、デフォルトのツールチップが表示されてしまいます。積み上げグラフでも、以下のようにheader, point, footerのformat機能を使用することはできます。
しかしheaderFormatのpoint.keyではcategoryの値がすべて表示されてしまいます

chart.tooltip( shared: true, reversed: true, useHTML: true, headerFormat: %Q|<span>{point.key}</span><br/>|, pointFormat: %Q|<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>|, footerFormat: %Q|<span>フッター文字</span>| )

この状態では、ヘッダーは "1件目のグラフ,1件目の内部データ1,1件目の内部データ2" のような表示になっています。
format機能内ではfunctionなどは使用できないため、このデータを操作して最初の値だけ出力することはできません。

長文で申し訳ありません。
ご教示いただけると幸いです。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問