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などは使用できないため、このデータを操作して最初の値だけ出力することはできません。
長文で申し訳ありません。
ご教示いただけると幸いです。
あなたの回答
tips
プレビュー