Morris.jsのラベル変数に文字列変数を渡す方法

Question

私はMorris.jsをRailsプロジェクトのチャートのレンダリングに使用しています。 Morris.jsのJSON文字列からラベルオプションに値を渡す方法がわからないという問題があります。以下は

は、ヘルパーメソッドからの内容です：

def worst_yield_chart_data(reports) 
    start_time = reports.last.published_at 
    end_time = reports.first.published_at 
    datetime = Report.where("config = ? AND published_at BETWEEN ? AND ?", 'ALL', start_time, end_time).select("distinct(published_at)") 
    datetime.map do |date| 
    { 
     published_at: date.published_at.to_datetime.to_formatted_s(:long), 
     # Top1 worst yield rate & station name 
     worst_accu_yield: Report.group_accu_yield_by_date(date.published_at).first.try(:worst_accu_yield), 
     worst_daily_yield: Report.group_daily_yield_by_date(date.published_at).first.try(:worst_daily_yield), 
     worst_accu_yield_station: Report.group_accu_yield_by_date(date.published_at).first.try(:station_name) || 'No Input', 
     worst_daily_yield_station: Report.group_daily_yield_by_date(date.published_at).first.try(:station_name) || 'No Input', 
     # Top2 Worst yield rate & station name 
     worse_accu_yield: Report.group_accu_yield_by_date(date.published_at).offset(2).first.try(:worst_accu_yield), 
     worse_daily_yield: Report.group_daily_yield_by_date(date.published_at).offset(2).first.try(:worst_daily_yield), 
     worse_accu_yield_station: Report.group_accu_yield_by_date(date.published_at).offset(2).first.try(:station_name) || 'No Input', 
     worse_daily_yield_station: Report.group_daily_yield_by_date(date.published_at).offset(2).first.try(:station_name) || 'No Input', 
     # Top3 worst yield rate & station name 
     bad_accu_yield: Report.group_accu_yield_by_date(date.published_at).offset(3).first.try(:worst_accu_yield), 
     bad_daily_yield: Report.group_daily_yield_by_date(date.published_at).offset(3).first.try(:worst_daily_yield), 
     bad_accu_yield_station: Report.group_accu_yield_by_date(date.published_at).offset(3).first.try(:station_name) || 'No Input', 
     bad_daily_yield_station: Report.group_daily_yield_by_date(date.published_at).offset(3).first.try(:station_name) || 'No Input' 
    } 
    end 
end 

以下のように表示内容：

= content_tag :div, "", id: "worst-accu-yield-data", data: {reports: worst_yield_chart_data(@reports_for_cart)} 

そしてHAMLファイル内のJavaScriptコードは以下のようなものです：

:javascript 
    jQuery(function() { 
    Morris.Bar({ 
     element: 'worst-accu-yield-data', 
     resize: true, 
     hideHover: 'auto', 
     continuousLine: true, 
     data: $('#worst-accu-yield-data').data('reports'), 
     goals: [90, 95.5, 100], 
     goalLineColors: ['#e74c3c', '#e67e22', '#2ecc71'], 
     xkey: 'published_at', 
     ykeys: ['worst_accu_yield', 'worse_accu_yield', 'bad_accu_yield'], 
     labels: ['worst_accu_yield_station', 'worse_accu_yield_station', 'bad_accu_yield_station'], 
     trendLine: true, 
     postUnits: '%', 
     ymin: 'auto', 
     ymax: 'auto', 
     parseTime: false, 
     barColors: ['#cb4b4b', '#f8aa33', '#1fbba6'], 
     barOpacity: 0.7, 
     behaveLikeLine: true 
    }); 

目的は、バーカートでの歩留まり率でTop3最悪の駅名を取得することです。 "xkey"と "ykeys"の文字列値を正しく取得できました。 また、morris.js（例：ステーションA、ステーションB、ステーションC）の各ステーションの名前をラベルオプションに渡したいと思います。 しかし、この場合には、それは私のためにハードコードされた文字列を示しています。worst_accu_yield_station、worse_accu_yield_station、bad_accu_yield_stationを。

My Bar Cart

それはラベルオプションに各ステーション名を渡すことは可能ですか？どんな助けでも大歓迎です！

Answer 1

問題は、ホバーオプションをカスタマイズすることで解決できます。

"hoverCallback": function(index, options, content){ 
    var row = options.data[index] 
    datetime = '<p><b>' + row.published_at + '</b></p>' 
    station1 = '<div style="color: #cb4b4b;">Worst: ' + row.worst_accu_station + ' (' + row.worst_accu_yield + '%)</div>' 
    station2 = '<div style="color: #f8aa33;">Worse: ' + row.worse_accu_station + ' (' + row.worse_accu_yield + '%)</div>' 
    station3 = '<div style="color: #1fbba6;">Bad: ' + row.bad_accu_station + ' (' + row.bad_accu_yield + '%)</div>' 
    return [datetime, station1, station2, station3] 
    },