标签: chartkick

我如何标记宝石"Chartkick"y&x轴?

Chartkick是否允许用户标记x/y轴?

     Sample Code:
     <%= line_chart Product.group("purchased").maximum(:price) %>
Run Code Online (Sandbox Code Playgroud)

html graph chartkick

5
推荐指数
1
解决办法
4036
查看次数

ReferenceError:未定义Chartkick

我正在使用chartkick gem来显示图表.我已经按照正确的安装文档,但每当我尝试使用他们的方法时

timeline [["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"], ["Jefferson", "1801-03-03", "1809-03-03"]]
Run Code Online (Sandbox Code Playgroud)

它在firebug中显示错误 ReferenceError:未定义Chartkick

ruby-on-rails-4 chartkick

5
推荐指数
1
解决办法
3313
查看次数

如何使用Chartkick在Google Charts中自定义图例

我正在使用Chartkick在Ruby-on-Rails项目中显示一些statisitcs数据.Chartkick基于Google Charts.有没有办法在图表的图例中自定义数据输出?

例如:

= pie_chart User.get_country_statistic, library: {legend: {position: "left"}, chartArea: {left:0, width:'100%'}}
Run Code Online (Sandbox Code Playgroud)

它给 在此输入图像描述

但是我需要这样的东西: 在此输入图像描述

也就是传说中的更多信息.我怎么能得到它?

charts ruby-on-rails chartkick

5
推荐指数
0
解决办法
1091
查看次数

如何更改使用Chartkick创建的柱形图的颜色?

是否可以更改使用Chartkick创建的柱形图的颜色?我在文档中搜索了它,但我找不到任何关于它的内容.有任何想法吗?

ruby-on-rails chartkick

4
推荐指数
1
解决办法
3125
查看次数

使用chartkick并删除点在line_chart中直线

我正在使用一个非常好的gem来使用Ruby on Rails创建图表.但我正在努力制作一个用直线连接圆点的折线图.它总是创造曲线.我需要直线.另外我想知道是否有人知道如何从线上删除点.我找不到办法做到这一点.

Chartkick.options = {
  height: "300px",
  min: -5, 
  max: 10,
  discrete: true,
}

<% series_a = {"10" => -5, "11" => 9,"12" => 3,"13" => -1,"14" => 4,"15" => -2,"16" => -4} %>

<%= line_chart [{name: "Series A", data: series_a}] %>
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails chartkick

3
推荐指数
1
解决办法
1983
查看次数

使用Wicked_PDF渲染为PDF时,ChartKick图表不显示

我正在使用Rails 4,Wicked_PDF和Chartkick Gem的
Google图表我使用:

<%= javascript_include_tag"//www.google.com/jsapi","chartkik"%>

html视图提供了图表和所有预期的内容.当我将.pdf附加到网址时,pdf文档会在浏览器中显示,但ChartKick图表不会显示.
图表应出现以下错误:

加载图表时出错:找不到适配器

我在PDFKit文档中找到了以下内容.

资源不包含在PDF中:图像,CSS或JavaScript似乎没有在PDF中正确下载.这是因为wkhtmltopdf不知道在哪里找到这些文件.确保使用绝对路径(以正斜杠开头)到您的资源.如果您使用PDFKit从原始HTML源生成PDF,请确保使用完整路径(包括域的文件路径或URL).在限制性服务器环境中,root_url配置可能是您要更改资产主机的内容.

我假设wkhtmltopdf没有找到图表的链接,但我不知道如何解决这个问题.
有没有人有建议?

我找到了这个链接:
在wicked_pdf中渲染jQuery

Unixmonkey帮助FattRyan为Highcharts解决这个问题.

任何人都可以帮助如何设置此wicked_pdf_javascript_include_tag,以便Wicket_PDF可以使用Google图表接受Chartkick的图表吗?

pdf charts ruby-on-rails wicked-pdf chartkick

3
推荐指数
1
解决办法
2971
查看次数

使用Chartkick显示数据

我有每天由用户通过表单添加的数据.这些领域中的一些记录温度:ambcur,:ambmin,:ambmax​​等这是托盘的所有部分,其中包含数据记录

我正在使用chartkick并且很棒,但我不确定如何随时间显示数据.

我试图做一个多重系列线图.

<%= line_chart [
                 {name: "Series A", data: @tray.datalogs.ambcur},
                 {name: "Series B", data: @tray.datalogs.ambmin}
             ] %>
Run Code Online (Sandbox Code Playgroud)

此外,单个线图也不起作用.

<%= line_chart @tray.datalogs.group(:ambcur).count %>
Run Code Online (Sandbox Code Playgroud)

有人可以帮助引导我朝着正确的方向前进吗?谢谢 :)

ruby ruby-on-rails ruby-on-rails-4 chartkick

3
推荐指数
1
解决办法
629
查看次数

Chartkick-vue 条形图 - “horizo​​ntalBar”不是注册控制器

我想将垂直柱形图转换为水平堆积条形图。我使用chartkick-vue0.61 和chart.js3.0-beta。

我当前的代码:

<column-chart :data="chartData" suffix="%"
              height="200px"
              :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]">
</column-chart>
Run Code Online (Sandbox Code Playgroud)

呈现方式如下:

在此输入图像描述

我找到了这个文档,但我不知道如何将其传递给chartkick-vue,所以我从单杠开始:

<bar-chart
  :data="chartData"
  suffix="%"
  height="200px"
  :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"
>
Run Code Online (Sandbox Code Playgroud)

但它失败了:

Error Loading Chart: "horizontalBar" is not a registered controller
Run Code Online (Sandbox Code Playgroud)

这是代码沙箱:https://codesandbox.io/s/pective-williamson-upohe

我该如何解决?

javascript chartkick vue.js chart.js

2
推荐指数
1
解决办法
7804
查看次数

在Chartkick中更改时间轴

我使用Chartkick来显示多个系列折线图.代码如下: -

<h1>Multiple Series Line</h1> <div id="chart-4" style="height: 300px;"></div> <script> new Chartkick.LineChart("chart-4", [{"name":"Workout","data":{"2013-02-10 00:00:00 -0800":3,"2013-02-17 00:00:00 -0800":3,"2013-02-24 00:00:00 -0800":3,"2013-03-03 00:00:00 -0800":1,"2013-03-10 00:00:00 -0800":4,"2013-03-17 00:00:00 -0700":3,"2013-03-24 00:00:00 -0700":2,"2013-03-31 00:00:00 -0700":3}},{"name":"Go to concert","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":0,"2013-02-24 00:00:00 -0800":0,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":2,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":0,"2013-03-31 00:00:00 -0700":0}},{"name":"Wash face","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":1,"2013-02-24 00:00:00 -0800":0,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":0,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":0,"2013-03-31 00:00:00 -0700":1}},{"name":"Call parents","data":{"2013-02-10 00:00:00 -0800":5,"2013-02-17 00:00:00 -0800":3,"2013-02-24 00:00:00 -0800":2,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":0,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":1,"2013-03-31 00:00:00 …

javascript java jsp visualization chartkick

1
推荐指数
1
解决办法
381
查看次数

未定义的方法`start_with?' 对于零:NilClass

使用chartkickwicked-pdf

应用程序/布局/pdf.html.erb

<!doctype html>
<html>
<head>
 <meta charset='utf-8' />
 <%= wicked_pdf_stylesheet_link_tag 'application', media: 'all' %>
 <%= wicked_pdf_javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 <%= javascript_include_tag "http://www.google.com/jsapi"%>
 <%= wicked_pdf_javascript_include_tag 'chartkick'%>
 </head>
 <body onload='number_pages'>
 <div id="header">
  <h2>Report</h2>
</div>
<div id="content">
  <%= yield %>
</div>
Run Code Online (Sandbox Code Playgroud)

但它在这条线上给出了一个错误

<%= wicked_pdf_stylesheet_link_tag 'application', media: 'all' %>
Run Code Online (Sandbox Code Playgroud)

错误

  undefined method `start_with?' for nil:NilClass
Run Code Online (Sandbox Code Playgroud)

我如何删除这个?错误

ActionView::Template::Error (undefined method `start_with?' for nil:NilClass):
2: <html>
3:   <head>
4:     <meta charset='utf-8' />
5:     <%= wicked_pdf_stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails wicked-pdf chartkick

1
推荐指数
1
解决办法
5552
查看次数

使用 Chartkick 和 Rails 的多系列折线图

我正在尝试设置一个多系列折线图,按模式显示每月总考试。

类似于此图表的内容:

在此处输入图片说明

我希望对模态进行着色:(CT、MR、US、XR、MG、BD、NM)

每月日期 (to_date) 将是 X 轴数据标签。

考试模式:

has_many :modalities
Run Code Online (Sandbox Code Playgroud)

模态模型:

belongs_to :exam
Run Code Online (Sandbox Code Playgroud)

我的 Charts 控制器有一个monthly_modalities 操作:

  def monthly_modalities
    chart_data = Modality.joins(:exam).map {|m|
      {name: m.name, data: m.exam.to_date}
    }
    render json: chart_data.each do |e|
      {name: :name, data: e.group_by_month(:to_date, format: '%b', range: 1.year).sum(:total).chart_json}
    end
  end
Run Code Online (Sandbox Code Playgroud)

这是创建的图表:

在此处输入图片说明

问题是重复模式没有组合在一起,并且月度日期 (to_date) 没有显示在 X 轴数据标签上。

ruby-on-rails chartkick

1
推荐指数
1
解决办法
2870
查看次数

Ruby on Rails 上使用 Chartkick 进行分组堆积条形图/柱形图

我有两个数据集,其中包含人工智能自动收集的数据和人类手动收集的数据。我目前使用Chartkick for Rails将它们显示为两个单独的柱形图:

在此输入图像描述

在此输入图像描述

如上所示,人工智能数据显示为堆积柱形图,显示已确认、拒绝和未验证数据的细分,因为我们仍然进行确认检查以查看人工智能的准确性,而人工操作数据按原样显示,因此,无需使用堆积柱形图。

现在,我想要实现的是并排显示人工智能和人工操作数据(分组),同时保持人工智能数据的堆叠属性。所以它应该看起来像这样:

在此输入图像描述

我目前拥有的两个单独图表的代码是:

controller

# Data for Stacked Column Chart
@ai_operated_data = [
  {
     name: "Confirmed",
     data: PotentialViolator.where(confirmation_status: 1).group_by_week(:capture_time).count
  },
  {
     name: "Rejected",
     data: PotentialViolator.where(confirmation_status: 0).group_by_week(:capture_time).count
  },
  {
     name: "Unverified",
     data: PotentialViolator.where(confirmation_status: -1).group_by_week(:capture_time).count
  }
]

# Data for Single Column Chart
@human_operated_data = [
  {
     name: "Human Operated Data",
     data: ManuallyCaughtViolator.group_by_week(:capture_time).count
  }
]
Run Code Online (Sandbox Code Playgroud)

view

<div class="ui container">
    <h1>Performance Analytics</h1>
    <div class="ui divider"></div>
      <%= column_chart @ai_operated_data, stacked: true %>
      <%= column_chart @human_operated_data %>
</div>
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails chartkick

1
推荐指数
1
解决办法
2144
查看次数

在“vue”中找不到导出“h”

我想使用“Chartkick”和 Vue 创建一个图表。但它无法正常工作,并且出现一些错误。错误:

\n
\n

./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14\n"在“vue”@\n 中找不到导出“h”。/node_modules/vue-chartkick/dist/vue -chartkick.esm.js @\n./src/main.js @ multi\n(webpack)-dev-server/client?http://localhost:8080\nwebpack/hot/dev-server ./src/main .js

\n
\n

main.js:

\n
import Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport { BootstrapVue, IconsPlugin } from 'bootstrap-vue'\nimport Chartkick from 'vue-chartkick'\nimport Chart from 'chart.js'\n\nimport 'bootstrap/dist/css/bootstrap.css'\nimport 'bootstrap-vue/dist/bootstrap-vue.css'\n\nVue.use(Chartkick.use(Chart))\nVue.use(VueRouter)\nVue.use(BootstrapVue)\nVue.use(IconsPlugin)\n\nVue.config.productionTip = false\n\nimport App from './App.vue'\nimport Home from './components/pages/Home.vue'\nimport Products from './components/pages/Products.vue'\n\nconst router = new VueRouter({\n  mode: 'history',\n  routes: [\n    { path: '/', component: Home, name: 'index'},\n    { path: '/products', component: Products, name: 'products'},\n  ],\n\n  /*\n  scrollBehavior (to, from, savedPosition) {\n    if …
Run Code Online (Sandbox Code Playgroud)

chartkick vue.js chart.js

1
推荐指数
1
解决办法
2699
查看次数