使用Chartkick和chart的Rails双轴
Chartkick和chart是两个用于数据可视化的Ruby on Rails的库。它们可以帮助开发人员在网页上创建各种类型的图表，包括线图、柱状图、饼图等。
Chartkick是一个简单易用的库，它使用Google Charts和Chart.js来生成图表。它的优势在于它的简洁性和易用性，开发人员可以通过简单的代码就能够创建出漂亮的图表。Chartkick支持多种图表类型，并且可以自动处理日期和时间数据。
chart是另一个流行的Ruby on Rails图表库，它提供了更多的自定义选项和功能。与Chartkick不同，chart不依赖于外部库，它使用纯JavaScript来生成图表。chart提供了丰富的配置选项，可以自定义图表的样式、颜色、标签等。它还支持动画效果和交互功能，使用户能够与图表进行交互。
这两个库在Rails开发中都有广泛的应用场景。开发人员可以使用它们来创建仪表盘、报表、数据分析等功能。例如，可以使用Chartkick和chart来展示销售数据、用户统计、股票走势等。它们可以帮助用户更直观地理解和分析数据。
腾讯云提供了一系列与数据可视化相关的产品和服务，可以与Chartkick和chart结合使用。其中包括云数据库MySQL、云数据库PostgreSQL、云数据库Redis等。这些产品提供了高可用性、高性能的数据库服务，可以存储和管理应用程序的数据。用户可以将数据从这些数据库中提取出来，使用Chartkick和chart生成图表。
腾讯云还提供了云服务器、云函数、云存储等基础设施服务，可以支持Rails应用程序的部署和运行。用户可以将Rails应用程序部署到云服务器上，使用云函数进行计算和处理，使用云存储存储和管理文件。这些服务可以帮助开发人员快速搭建和扩展Rails应用程序。
总结起来，Chartkick和chart是用于数据可视化的Ruby on Rails库，可以帮助开发人员创建各种类型的图表。腾讯云提供了与数据可视化相关的产品和服务，可以与这些库结合使用，帮助开发人员构建强大的数据可视化应用。
相关·内容
我使用的是带有gem chartkick的rails Rails 5.1.5
我想画一个柱状图。我的代码如下：
<%= column_chart @communes %>
我得到了正确的数字，但没有x轴上的标签。我只有三个。
如果我使用任何其他图表，一切都可以正常工作，并且我有正确的轴标签。例如，使用
<%= line_chart @communes %>
我得到了
谁能给我解释一下调用column_chart的正确方式是什么？
浏览 0提问于2018-03-21得票数 3
我想在rails中使用chartkick来显示数据。我的数据结构非常简单。
//Table Drinks
Created_at Water (in l) Beer (in l) Coffee (in l)
21/02/2016 1 2 1
20/02/2016 2 1 0
19/02/2016 2 2 2
...
我想画三个折线图。每个折
浏览 3提问于2016-01-24得票数 0
我使用的是rails 5.1.6，在网站上，它告诉用户如何下载和使用chartkick。所以我捆绑安装了gem " chartkick "，然后因为我使用的是rails 5.1.6，所以我在app/assets/javascripts/application.js中添加了//= require //= require Chart.bundle。
Gemfile.lock
chartkick (3.2.1)
app/assets/javascripts/application.js
//= require chartkick
//= require Chart.bundle
当我
浏览 9提问于2019-08-03得票数 1
我有一个Rails 3.2.14应用程序，我正在使用chartkick和groupdate gem来生成一些基本图表。
加载视图时，会得到错误：Error Loading Chart: No adapter found
下面是我的视图代码：
index.html.erb
<%= line_chart Call.group_by_week(:created_at).count %>
下面是我的应用程序布局，包括图表和生成chart_js application.html.erb (布局)
<%= javascript_include_tag "application&
浏览 8提问于2014-10-10得票数 7
回答已采纳
在阅读之后，我尝试将图表添加到我的网站Gemfile：
...
gem 'chartkick'
...
index.html.erb：
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<h1>Hello, Rails!</h1>
资产/javascript
浏览 5提问于2014-04-23得票数 0
回答已采纳
我在Ruby on Rails中使用chartkick和chart.js。我看到了文档和一些问题，但我找不到任何东西来解决我的问题。
我在html.erb文件中设置图表，如下所示：
<%=
line_chart $hash_chart,
options: {
max: $value.max+5,
min: $value.min-5,
allowDecimals: false,
colors: color_line,
xtitle: "Ti
浏览 31提问于2021-05-28得票数 0
回答已采纳
我正在尝试使用chartkick gem在Rails6中制作一些简单的图表。我严格遵循chartkick.com上的快速入门，但我无法加载图形。我一直在我的浏览器中收到错误消息“未捕获ReferenceError:未定义Chartkick”。 我安装了宝石。我运行了yarn add chartkick chart.js 这是我的完整application.js文件 require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
r
浏览 17提问于2020-09-23得票数 0
回答已采纳
我使用Chartkick和Chart.js来可视化两行的数据集，但是，只显示x轴上的第一个刻度
我已经尝试按照chart.js文档将选项传递给dataset，这表明我不希望刻度自动跳过。
<%= line_chart [
{ name: "Successes", data: @successful_requests },
{ name: "Errors", data: @error_requests }
],
dataset:{
scaleShowValues: true,
scales: {
浏览 5提问于2019-08-30得票数 1
我试图在Rails中使用Chartkick (默认情况下是Chart.js)来呈现基本的线条图。我遵循了安装说明()，并添加了
importmap.jbIn /index.html中添加了<%= javascript_importmap_tags %> ，我在用户/index.html中添加了<%= javascript_importmap_tags%>，我有<%= line_chart User.group_by_day(：created_at)<%=line_chart User.group_by_day(:created_at).count .coun
浏览 4提问于2022-08-23得票数 0
在我的rails api-only应用程序中集成chartkick gem时，文档指出需要在application.js文件中像这样改进js。该应用程序是一个纯api的应用程序，没有application.js文件。 //= require Chart.bundle
//= require chartkick 在没有application.js文件的情况下，如何要求chartkick与activeadmin一起使用？
浏览 8提问于2019-03-06得票数 1
如何在rails 4.0中使用Chartkick。
在宝石中，我补充道：
宝石“图表”
例如，在我看来，我补充说：
<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
但这一页只显示加载..。生成的Html：
<div id="chart-1" style="height: 300px; text-align: center; color:
#999; line-height: 300px; font-size: 14px; font-fam
浏览 2提问于2013-10-02得票数 12
回答已采纳
1回答
chartkick被集成到Rails 4应用程序中。在gemfile中，添加了以下内容：
gem 'chartkick'
gem 'highcharts'
gem 'groupdate'
一个简单的操作common_chart被定义为：
def common_chart
@data_set = PaymentRequest.all
end
这是common_chart.html.erb
<div class="container-fluid">
<% line_chart @data_set.gro
浏览 2提问于2016-11-28得票数 0
回答已采纳
在chartkick的column_chart中，我想要删除图表的轴，如所附图像所示。 我试过这个代码，但是我无法隐藏axis。 <%= column_chart data, library: { hAxis: { textPosition: 'none' },vAxis: { textPosition: 'none' } } %> enter image description here
浏览 17提问于2020-07-02得票数 1
回答已采纳
我遇到这个问题已经有一段时间了，希望能得到一些帮助。我有一个chartkick问题。我的图表根本不会显示在前端。 我的application.js看起来像 //= require rails-ujs
//= require activestorage
//= require underscore
//= require gmaps/google
//= require icalendar
//= require turbolinks
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require
浏览 12提问于2020-04-09得票数 0
我希望在我的应用程序中集成一些图表，所以我尝试使用Chartkick来实现这一点。据我所知，我从这里开始遵循了设置过程(https://github.com/ankane/chartkick)，这看起来非常简单。但在我的视图中，图表只显示“正在加载”。 我已经确保我已经捆绑并重新启动了rails s，并且还使用不同的模型对其进行了测试，但还是回到了github页面中使用用户模型的示例(在我的例子中，我使用了3)。 Gemfile： gem 'chartkick', '~> 3.0', '>= 3.0.1'
gem &
浏览 36提问于2019-02-11得票数 0
1回答
为什么x轴是日期
、、
我已经创建了一个自定义散列，但x轴显示为日期。我希望它只显示散列中的值(1,2,3等)。这是我第一次使用chartkick，所以我不知道为什么会发生这种情况。
显示的是值为504的2000年1月1日、值为499的2000年2月1日等等。
当我将@chart_hash设置为数组，而不是哈希(如下所示)时，我得到的是x轴上的时间而不是日期。
application.html.erb
<head>
<title>SampleApp</title>
<%= javascript_include_tag "//www.google.com/jsapi
浏览 1提问于2015-08-10得票数 0
我目前遇到了一个问题，获得一个运行的总数，一些数据将使用在一个Rails应用程序与Chartkick和acts_as_taggable_on。
我希望用户搜索带有标记的项目，其中我的@items是：
@items = current_user.items.tagged_with(params[:query])
我的x轴是我的项目的created_at日期，我的y轴只是a:来自我的模型的结果，它是一个整数。我希望x轴上的每一项都是一个正在运行的总数，包括最后一个值(正数或负数)。
如果我设置：
@chart = current_user.items.all
然后用这个来做图表：
= line_c
浏览 3提问于2015-03-04得票数 2
回答已采纳
我使用的是chartick2.2.5 on Rails，但我无法在视图上显示图形。我按照文档中的安装过程进行了操作，但图形似乎仍未加载。这是我拥有的文件：
application.js
//= require jquery
//= require rails-ujs
//= require bootstrap-sprockets
.
.
.
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require jquery.raty
//= require_tree .
application.
浏览 4提问于2018-02-21得票数 0
回答已采纳
我正在和Laravel一起使用vue-chartkick。我按照documentation来安装它。 npm install vue-chartkick chart.js 然后，在resources/js/app.js中 import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart))
...
const app = new Vue({
el: '#app',
router: router,
浏览 53提问于2020-07-04得票数 1
回答已采纳
我正在使用Rails中的Chartkick通过Google的API生成图表。它在我的开发系统上运行得很好，但是生活在Heroku Chartkick上提供了以下错误消息：
Error Loading Chart: No adapter found
在app/views/layouts/application.rb中，我有以下内容：
<%= javascript_include_tag "http://www.google.com/jsapi", "chartkick" %>
我尝试过用config/application.rb打开config.ser
浏览 1提问于2015-08-21得票数 0
回答已采纳
我只想让x轴在y=0处显示在我的条形图上，也就是下面所示的绿色线。
我应该使用什么chart.js/chartkick配置来实现这一点？还是我必须直接策划？如果是的话，我如何做到这一点？
目前，我有以下chart.js配置，它删除了所有行，包括所需的x轴。
library: {
scales: {
yAxes: [{
ticks: {
display: false,
},
gridLines: {
display: false
浏览 4提问于2021-03-31得票数 1
回答已采纳
我在/ plugin /vue-chartkick中创建了vuechartkick插件。 import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart)) nuxt模板 <div class="pa-4 pa-md-8">
<div class="border-light pa-4 pa-md-12">
浏览 13提问于2021-02-02得票数 2
我的问题是，无论我怎么尝试，我都被“加载..”所困扰。当我使用chartkick和wicked_pdf时，我应该有图表。 Gemfile gem 'wicked_pdf'
gem 'wkhtmltopdf-binary-edge', '0.12.4.0'
gem 'chartkick' 控制器 respond_to do |format|
format.html
format.pdf do
render pdf: "FILENAME",
template:
浏览 13提问于2019-08-27得票数 1
1回答
我使用Chartkick来生成rails应用程序的图表。
我有以下两张桌子。
表A: Item_History
表B:项目
它们通过表A中的itemId链接到表B中的Id。
使用下面的ChartKick代码，我试图通过ItemID (表A)进行分组，我希望能够从表B中获得项目名称。
<%= pie_chart Item_History.where("record = ?", 16).group(:itemid).sum(:price) %>
任何帮助都将不胜感激。
浏览 3提问于2014-06-13得票数 1
回答已采纳
我创建了一个新的rails应用程序并配置了图表，图表在本地加载良好。但是当它被推到heroku的时候它没有装载。
为什么它在开发中加载时没有任何错误，而没有在heroku中加载？有什么线索吗？
Application.js
//= require Chart.bundle
//= require chartkick
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Gemfile
gem 'chartkick'
Applicaion.html.erb
浏览 2提问于2018-08-17得票数 1
回答已采纳
1回答
我使用的是vue-chartjs https://vue-chartjs.org/ 和vue-chartkick https://www.npmjs.com/package/vue-chartkick 使用来自Covid api的数据，vuex存储.cases对象https://disease.sh/v3/covid-19/historical/all?lastdays=365 <bar-chart :data="this.WorldTimelineData"></bar-chart> 将显示条形图，但它是水平的而不是垂直的，如何使其垂直？ Photo
浏览 32提问于2020-08-19得票数 0
1回答
我按照https://chartkick.com/上的文档进行了全新的Rails 6安装，但我得到了以下信息： Webpacker can't find chartkick in /home/sbstn/codes/desafio_latam/g24/chart_demo/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpa
浏览 12提问于2019-10-17得票数 0
1回答
我正在按照google指令构建一个垂直百分比图：
它应该是这样的：
然而，现在的情况是这样的。
我正在使用与谷歌相同的data。
my_graph_controllers
@data = [
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation&#
浏览 0提问于2019-02-05得票数 2
回答已采纳
我正在尝试为Pack数据库创建一个图表，其中x轴是每天，y轴是Pack数据库中:amount字段的计数。我目前使用的代码如下：
= line_chart @packs.pluck("amount").group(:created_at).count
我得到了这个错误：
undefined method `group' for [2, 7, 0, 0]:Array
如何使用Chartkick显示图表，其中它计算或显示当天的:amount记录？
浏览 1提问于2014-06-29得票数 1
我想生成具有双y轴的条形图。我试着这样做
-(void)loadGraph
{
_barColors = @[[UIColor cyanColor]];
_currentBarColor = 0;
// CGRect chartFrame = CGRectMake(0.0,
// 0.0,
// 3
浏览 0提问于2016-07-29得票数 0
我有以下代码(使用chartkick )：
<%= pie_chart [[t('result.positive'), @rating_positive], [t('result.negative'), @rating_negative], [t('result.neutral'), @rating_neutral]],
colors: ['#B3D986', '#E04848', '#C9C9C9'],
library: {
chart: {
ba
浏览 3提问于2014-05-02得票数 0
回答已采纳
1回答
我使用的是一个名为chartkick的rails gem。
我不能在一个视图中将两个图表排成一行。它们总是像单独的div一样排列在彼此的顶部。我试着把这些东西插到桌子上或者跨度上，但没有任何运气。你知道怎么解决这个问题吗？
<span>
<%= line_chart Client.sum(:bill_charge) %>
</span>
<span>
<%= bar_chart Client.sum(:bill_charge) %>
</span>
浏览 1提问于2016-04-17得票数 0
1回答
作为web平台，我对Ruby非常陌生，并通过调整和扩展示例来学习。我喜欢辛纳特拉，我想用它和沙特奎克来显示图表。不幸的是，我在运行最简单的示例时遇到了困难，而且似乎缺少完整的示例(很多“一个行”)。我现在拥有的是：
require 'sinatra'
require 'chartkick'
get '/' do
'<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= pie_chart({"
浏览 2提问于2014-04-23得票数 4
回答已采纳
1回答
我在Visual studio 2010中使用MS图表控件Windows4框架，使用.net窗体。我有一个问题的主要x轴上的用户输入的文本框点击按钮的问题。我还使用了主y轴和次y轴，这两个轴都作用于用户输入。
我检查了每个轴的设置，它们都有相同的设置。我不明白为什么两个y轴都对用户输入有效，而x轴不起作用。请帮帮忙。
下面是我使用的代码：
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
Chart1.ChartAreas("Area1
浏览 1提问于2011-07-22得票数 2
回答已采纳
我从这个文档中读到：
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js
Vue.use(Chartkick.use(Chart))'
因此，将其添加到Vue js中的单个组件中是正确的吗？我有嵌套组件，我希望只将此图表包含到一个组件中。我应该把这包括在main.js全球还是本地组件？
浏览 5提问于2019-10-10得票数 0
回答已采纳
我是vue.js的新手，我不确定为什么会出现下面的错误--您的帮助将不胜感激。我认为问题可能出在ChartkickCharts.vue文件中，但不确定-您的建议将非常有帮助
我得到的错误是：
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ChartkickCharts> at src\components\vueChartkick\ChartkickCharts.vue
<App> at src\App.
浏览 1提问于2018-05-29得票数 0
2回答
我想使用插件，但希望在我的单个文件组件中注册它，而不是全局使用它。有没有办法达到同样的效果？
Vue.use(VueChartkick, { Chartkick })
在单个文件组件中？我尝试导入插件，然后将其注册为组件，但它一直告诉我没有定义相应的组件。这是我的单文件组件：
<template lang="pug" >
div
area-chart(:data="monthlyRevenue")
</template>
<script>
import Api from '../.
浏览 1提问于2018-03-27得票数 2
我有像这样的数据
graph_data = {
"Commercial"=>364,
"Residential"=>463,
"Hospitality"=>150,
"Industrial"=>20,
"Laboratory"=>1
}
pie_chart graph_data
当我将其添加到饼图中时，它会显示每个选项的百分比图表，我想显示百分比的值，我如何做到这一点，
我在ruby on rails 4中使用Chartkick gem
浏览 2提问于2015-04-30得票数 2
1回答
图表继续加载
、、
我试着用Chartkick显示一个简单的图表。我已经安装了宝石图表、群日期和active_median。我有一个模型(客户端)，我想在这个图形上进行测试，所以我用这行代码进行了尝试：
<%= line_chart Client.group_by_day(:created_at), id: random_chartkick_id %>
在我的助手中，我有这样的方法来生成图表的随机ID
def random_chartkick_id
return 'chart-#'+(Random.rand(10000)).to_s
end
我正在通过cdn使用google的jsa
浏览 0提问于2017-10-06得票数 0
回答已采纳
1回答
我正在尝试在我的项目中使用vue chartkick。但是当我运行我的项目时，它会给我两个警告 WARNING Compiled with 2 warnings 08:41:24
warning in ./src/main.js
"export 'default' (imported as 'Chart') was not found in 'chart.js'
warning i
浏览 42提问于2021-09-26得票数 0
1回答
谷歌直线图双向Y轴问题
、、、
我正在开发一种双Y轴直线，即Y轴上有高度和重量，X轴上显示日期：
我从MYSQL数据库中提取数据，并将其编码为json，并将其传递给绘制图表的函数，如下图所示：
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'pa
浏览 4提问于2016-09-06得票数 1
回答已采纳
我使用垂直条形图，并希望为每个条形指定不同的颜色：
main.js
import Chartkick from 'vue-chartkick';
import Chart from 'chart.js';
Vue.use(Chartkick.use(Chart));
File.vue
<column-chart :data="chartData" width="800px" :colors="['#0b6e00', '#006ca2', '#ff3333', '
浏览 5提问于2020-04-09得票数 2
回答已采纳
1回答
我想用Vue创建一个图表。但是它不能正常工作，而且我遇到了一些错误。错误：
./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14在'vue‘@ ./node_modules/vue-chartkick/dist/vue-chartkick.esm.js @ ./src/main.js @ multi (Webpack)-dev-server/client中找不到“export.h”？ webpack/hot/dev-server ./src/main.js
main.js:
import Vue from
浏览 0提问于2021-03-04得票数 1
回答已采纳
1回答
我有一个时间表，显示许多谷歌图表。
当你点击主页时，所有的谷歌图表都会正确加载和显示。然而，在时间线的底部有一个"Load More“。不会绘制由此负载更多生成的图表。
确切的例子是。查看多个图表成功呈现。并查看底部和“加载更多”。在“加载更多”之后，图表不会呈现。
使用调试器时，我发现drawChart没有被调用。google.setOnLoadCallback(drawChart);似乎没有被调用。
这个Load More调用完全相同的代码来绘制图表。以下是在构建时间轴时执行的部分代码。下面的代码包含在页面上显示的每个图表中。
google.load("visual
浏览 17提问于2016-09-06得票数 1
我在一个rails 4应用程序中使用chartkick。我目前运行以下代码：
<%= bar_chart groupArticles(metric, limit) %> (groupArticles()是一种将数组放入chartkick的自定义方法。例如，根据views指标，<%= bar_chart groupArticles("views", 5)%>给了我排名前五的文章。
现在的问题是:我想要有一个小的表单，用户可以选择一个不同的指标或限制来传递(例如，将其更改为前3名或从views更改为date或w/e)。
然后我想重新加载图表(我有URL参数来
浏览 2提问于2014-03-12得票数 2
我正在以一种标准的方式使用chart kick，就像GitHub指令所规定的那样，它在本地版本中工作。当上传到Heroku时，我的图表在呈现的部分页面上产生错误"ReferenceError: Can't find variable: Chartkick“。
这就是我到目前为止所做的。
gemfile：
gem 'chartkick'
application.js：
//= require Chart.bundle
//= require chartkick
//= require_tree .
我的show视图通过path方法呈现了一个调用控制器操作的部分。
浏览 0提问于2017-11-05得票数 1
为了使用Chartkick，我创建了一个自定义卡片。这个自定义卡片将有一个选择下拉列表，它将发出Axios请求，从API获取数据并将其显示在图表中，尽管我的问题是，即使使用硬编码的虚拟数据，图表也不会显示，如下所示： <template>
<card class="flex flex-col items-center justify-center">
<span>Ben</span>
<line-chart class="lcs" :data="chart_d
浏览 11提问于2019-09-24得票数 0
3回答
首先，请原谅我的英语。
我是Rails的初级开发人员，我开发了一个用户管理应用程序。我正在研究最后一个特性，即使用Chartkick和WickedPDF在PDF中生成统计信息。
但是，我有一个问题，因为生成的JS字体非常小。我什么都试过了，但什么也没做，我不能放大这个字体。
下面是生成我的图形之一的一行：
<%= pie_chart Infosheet.group(:gender).count, library: {FontSize: 90} %>
这将生成以下代码：
<script type="text/javascript">
浏览 2提问于2018-04-04得票数 0
我试着用React显示条形图--Chartkick和Chart.js，我想定制条形图的颜色。目前，通过传递这样一个道具：<BarChart colours={["#fff"]} />，我可以将所有的条形设置为相同的颜色。
在React中使用LineCharts -Chartkick，您可以通过通过该道具传递一系列颜色来设置线条的颜色。然而，BarCharts似乎只接受第一种颜色。这是反应的限制--夏特奎克，还是我做错了什么？
我试着通过library道具传递选项(如这里所描述的：library)，因为这就是我如何定制轴和标签的颜色，但这似乎不影响条形。
以下是我的当
浏览 0提问于2019-06-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
