使用Gem:https://github.com/ankane/chartkick创建的图表
erb代码:
<%= line_chart [
{name: "线上消费会员", data: @product_users_days_line_chart},
{name: "线下消费会员", data: @pay_users_days_line_chart},
{name: "会员数", data: @users_days_line_chart}] %>
生成javascript代码:
new Chartkick.LineChart("chart-1", [{
"name": "线上消费会员",
"data": [
["10-21", 6],
["10-23", 1]
]
}, {
"name": "线下消费会员",
"data": [
["09-27", 419],
["09-28", 534],
["09-29", 562],
["09-30", 750],
["10-01", 770],
["10-02", 631],
["10-03", 625],
["10-04", 600],
["10-05", 665],
["10-06", 977],
["10-07", 923],
["10-08", 384],
["10-09", 495],
["10-10", 486],
["10-11", 465],
["10-12", 678],
["10-13", 1304],
["10-14", 1222],
["10-15", 387],
["10-16", 457],
["10-17", 504],
["10-18", 432],
["10-19", 657],
["10-20", 1215],
["10-21", 1260],
["10-22", 15],
["10-23", 2]
]
}, {
"name": "会员数",
"data": [
["09-27", 232],
["09-28", 454],
["09-29", 520],
["09-30", 679],
["10-01", 1097],
["10-02", 860],
["10-03", 886],
["10-04", 811],
["10-05", 903],
["10-06", 1307],
["10-07", 1053],
["10-08", 305],
["10-09", 358],
["10-10", 433],
["10-11", 361],
["10-12", 537],
["10-13", 1272],
["10-14", 1026],
["10-15", 310],
["10-16", 328],
["10-17", 412],
["10-18", 342],
["10-19", 500],
["10-20", 1191],
["10-21", 1031],
["10-22", 12]
]
}], {});
一些像这样的错误
但图表xAxis不按日期时间顺序排序
我认为默认的xAxis类型是datetime,但是我的格式是ruby代码d.cal_at.strftime("%m-%d")
,类型是string,所以,我看了Highcharts文档,需要将Highcharts的xAxis类型设置为category
此线上消费会员
折线图xAxis错误,数据示例:
{
"name": "线上消费会员",
"data": [
["10-21", 6],
["10-23", 1]
]
}
发布于 2018-10-28 23:23:24
def format_order_date(data)
sql_data = data.map {|d| [d.cal_at.strftime("%m-%d"), d.count]}.to_h
(1.month.ago.to_date..Date.today).map{ |date| date.strftime("%m-%d") }.map do |key|
[key, sql_data[key] || 0]
end
end
我为每个数据集生成相同的x
https://stackoverflow.com/questions/53025013
复制相似问题