Question

我正在使用Morris.js在Rails项目中渲染图表。有一个问题，我不知道如何将值从JSON字符串传递给Morris.js中的标签选项。

以下是辅助方法的内容：

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最差的电台名称及其＆＃39;酒吧车的收益率。我能够在＆＃34; xkey＆＃34;中获得字符串值。和＆＃34; ykeys＆＃34;正确。此外，我想将每个电台的名称传递给morris.js中的标签选项（例如：电台A ，电台B ，电台C < /强>）。但在这种情况下，它会为我显示硬编码字符串： worst_accu_yield_station ， worst_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]
  },

如何将字符串变量传递给Morris.js

1 个答案: