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

How to pass string variables to labels option in Morris.js

本文关键字：js Morris 中的 labels 选项 字符串 变量      更新时间：2023-09-26

我在Rails项目中使用Morris.js来渲染图表。有一个问题，我不知道如何将值从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 Worst站名及其"酒吧推车中的良品率"。我能够正确地获得"xkey"answers"ykeys"中的字符串值。此外，我想将每个电台的名称传递到morris.js中的标签选项（例如：电台A、车站B和站点C）。但在这种情况下，它为我显示了硬编码的字符串：wort_accuyield_station、worse_accuYield_station和bad_accuyield-station。

我的酒吧购物车

是否可以将每个电台名称传递到标签选项？任何帮助都将不胜感激！

这个问题可以通过自定义悬停选项来解决。

"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]
  },
相关文章：