如何将字符串变量传递到Morris.js中的labels选项
How to pass string variables to labels option in Morris.js
我在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]
},
相关文章:
- Morris.js折线图x轴标签在调整大小后消失
- Morris.js无法显示ajax返回的数据
- "TypeError:无法调用方法'匹配'未定义的“;Angular JS指令中的Morris
- 正在尝试将morris.js图表插入Bootstrap旋转木马
- 从嵌套的JSON中检索数据到Morris.js xkey
- 在Morris.js和Laravel 5中循环JSON数据
- morris.js图表-Javascript var作为标签
- morris.js找不到Graph容器元素
- 是否可以将Morris.js(RaphaelJS)与Web Workers相结合
- RubyonRails中的morris.js错误
- Morris.js文件数据
- 如何使用Morris.js中的本地json数据
- 如何将值传递到图表(chart.js/morris.js)
- Morris JS中的不同颜色线段
- morris.js图表;无法在生产服务器上工作
- 使用morris.js根据复选框值切换数据
- 在morris.js中触发甜甜圈片段的点击事件
- Morris.js在Django模板数组中显示不正确的线形图
- 是否可以在morris.js中为xkey使用两个值?
- 未捕获的TypeError: Cannot read property 'x'Morris.js