javascript - 如何将字符串变量传递给 Morris.js 中的 labels 选项

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
    });

目的是通过酒吧购物车中的 yield 获得 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]
  },