首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用Highcharts和chartkick设置分类类型?

如何使用Highcharts和chartkick设置分类类型?
EN

Stack Overflow用户
提问于 2018-10-28 02:24:11
回答 1查看 116关注 0票数 0

使用Gem:https://github.com/ankane/chartkick创建的图表

erb代码:

代码语言:javascript
运行
复制
<%= line_chart [
   {name: "线上消费会员", data: @product_users_days_line_chart},
   {name: "线下消费会员", data: @pay_users_days_line_chart},
   {name: "会员数", data: @users_days_line_chart}] %>

生成javascript代码:

代码语言: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错误,数据示例:

代码语言:javascript
运行
复制
 {
     "name": "线上消费会员",
     "data": [
      ["10-21", 6],
      ["10-23", 1]
     ]
    }
EN

回答 1

Stack Overflow用户

发布于 2018-10-28 23:23:24

代码语言:javascript
运行
复制
  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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53025013

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档