はじめに
Highchartsはグラフを作成するためのJavaScriptライブラリで、データを視覚的に表示する際に非常に役立ちます。この記事ではRailsでHighchartsを使用してさまざまな種類のグラフを作成する方法について見ていきます。
Highchartsの構成要素
Highchartsの設定にはいくつかの主要な構成要素があります。以下にそれぞれの説明を示します。
f.title
グラフのタイトルを設定します。textオプションでタイトルのテキストを指定します。
f.title(text: 'Monthly Average Temperature')f.xAxis
X軸の設定を行います。categoriesオプションでX軸のカテゴリを指定します。
f.xAxis(categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])f.series
グラフに表示するデータシリーズを設定します。nameオプションでシリーズの名前を指定し、dataオプションでデータポイントを配列で指定します。
f.series(name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6])
f.series(name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5])具体例
以下に基本的な例といくつかの異なるグラフの例を示します。コントローラでデータを取得し、ビューに渡します
折れ線グラフ
# app/controllers/charts_controller.rb
class ChartsController < ApplicationController
def index
@line_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'Monthly Average Temperature')
f.xAxis(categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
f.series(name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6])
f.series(name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5])
end
end
end<!-- app/views/charts/index.html.erb -->
<%= high_chart("line_chart", @line_chart) %>円グラフ
# app/controllers/charts_controller.rb
class ChartsController < ApplicationController
def pie_chart
@pie_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(type: 'pie')
f.title(text: 'Browser market shares in January, 2022')
f.series(name: 'Browsers', data: [
['Chrome', 61.41],
['Internet Explorer', 11.84],
['Firefox', 10.85],
['Edge', 4.67],
['Safari', 4.18],
['Sogou Explorer', 1.64],
['Opera', 1.6],
['QQ', 1.2],
['Other', 2.61]
])
end
end
end<!-- app/views/charts/pie_chart.html.erb -->
<%= high_chart("pie_chart", @pie_chart) %>棒グラフ
# app/controllers/charts_controller.rb
class ChartsController < ApplicationController
def bar_chart
@bar_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(type: 'bar')
f.title(text: 'Historic World Population by Region')
f.xAxis(categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'])
f.series(name: 'Year 1800', data: [107, 31, 635, 203, 2])
f.series(name: 'Year 1900', data: [133, 156, 947, 408, 6])
f.series(name: 'Year 2000', data: [814, 841, 3714, 727, 31])
f.series(name: 'Year 2016', data: [1216, 1001, 4436, 738, 40])
end
end
end<!-- app/views/charts/bar_chart.html.erb -->
<%= high_chart("bar_chart", @bar_chart) %>カスタマイズ
Highchartsはカスタマイズオプションを提供しており、詳細なスタイル調整が可能です。以下にいくつかのカスタマイズの例を示します。
ツールチップとアニメーションのカスタマイズ
ツールチップ(ユーザーが特定の要素にマウスをホバーさせたときに追加情報を表示する小さなポップアップ)やアニメーションをカスタマイズすることでユーザーにとってより分かりやすく、視覚的に魅力的なグラフを作成できます。
# app/controllers/charts_controller.rb
class ChartsController < ApplicationController
def index
@line_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'Monthly Average Temperature')
f.xAxis(categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
f.series(name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6])
f.series(name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5])
f.tooltip(
headerFormat: '<b>{series.name}</b><br>', # ツールチップのヘッダー部分を太字にしてシリーズ名を表示
pointFormat: '{point.x}: {point.y}°C' # データポイントのX値とY値を表示し、Y値に°Cを付け加える
)
f.plotOptions(
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
)
f.chart(
animation: {
duration: 1500, # アニメーションの持続時間を1500ミリ秒に設定
easing: 'easeOutBounce' # アニメーションのイージングを'bounce'に設定
}
)
end
end
end上記のコードでは下記部分でツールチップのヘッダーとポイントフォーマットをカスタマイズしています。これにより、データポイントにマウスをホバーした際に表示される情報が変更されます。
f.tooltip(
headerFormat: '<b>{series.name}</b><br>', # ツールチップのヘッダー部分を太字にしてシリーズ名を表示
pointFormat: '{point.x}: {point.y}°C' # データポイントのX値とY値を表示し、Y値に°Cを付け加える
)また、下記部分でグラフのアニメーション効果を追加しています。アニメーションの持続時間とイージング（アニメーションの動きのパターン）を設定しています。
f.chart(
animation: {
duration: 1500, # アニメーションの持続時間を1500ミリ秒に設定
easing: 'easeOutBounce' # アニメーションのイージングを'bounce'に設定
}
)カラーとテーマのカスタマイズ
グラフの色やテーマをカスタマイズすることで視覚的に統一感のあるデザインを提供できます。
# app/controllers/charts_controller.rb
class ChartsController < ApplicationController
def index
@line_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'Monthly Average Temperature')
f.xAxis(categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
f.series(name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6])
f.series(name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5])
f.colors(['#FF0000', '#00FF00', '#0000FF']) # データシリーズの色を赤、緑、青に設定
f.chart(
backgroundColor: '#F0F0F0', # グラフの背景色を薄い灰色に設定
borderRadius: 10 # グラフのボーダーの角を丸くする
)
end
end
end上記のコードでは下記部分でデータシリーズの色、背景色、ボーダーの角をカスタマイズしています。
f.colors(['#FF0000', '#00FF00', '#0000FF']) # データシリーズの色を赤、緑、青に設定
f.chart(
backgroundColor: '#F0F0F0', # グラフの背景色を薄い灰色に設定
borderRadius: 10 # グラフのボーダーの角を丸くする
)まとめ
HighchartsはRailsアプリにグラフを簡単に追加できる強力なツールです。基本的な設定からカスタマイズまで見ていきましたが、Highchartsの公式ドキュメントを参考にしながらさらに多くの機能を探索してみてください。RailsとHighchartsを組み合わせることで、データを効果的に視覚化しユーザーにとってわかりやすく魅力的なアプリを作ることができます。ぜひ挑戦してみてください。
コメント