Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
扣子Coze
职场AI,就用扣子
美图设计室
AI智能一键生成海报,免费平面设计
即梦AI
一站式智能创作平台,即刻造梦
AiPPT
全智能AI一键生成 PPT
腾讯云优惠券
云服务器,云数据库,CDN,域名注册等多种云计算服务
fly63工具箱
简单、易用、便捷的在线工具
宝塔服务器面板
简单好用的服务器运维面板
LiblibAI
一站式AI内容创作生成平台,原创AI模型分享社区
硅云优惠券
领先的基础云计算服务提供商,PHP云虚拟主机第一品牌
堆友AI
零门槛,多风格AI绘画免费生成,电商海报设计神器

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

Chartkick

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://chartkick.com
GitHub:https://github.com/ankane/chartkick
网站描述:用一行Ruby代码创建漂亮的JavaScript图表
访问官网
GitHub

Chartkick是一个图表绘制工具,特点是UI美观、使用简单,并且支持IE6在内的大多数浏览器。之所以说它使用简单,是因为只需要一行Ruby代码即可绘制出漂亮的图表!


比如你需要一个线状图:

<%= line_chart User.group_by_day(:created_at).count %>

绘制一个饼状图:

<%= pie_chart Goal.group("name").count %>

柱状图:

<%= column_chart Task.group_by_day_of_week(:created_at).count %>

多重线图:

<%= line_chart @goals.map{|goal|
    {:name => goal.name, :data => goal.feats.group_by_week(:created_at).count }
} %>

安装Chartkick只需要往应用中添加该gem:

<%= line_chart User.group_by_day(:created_at).count, :min => 1000, :max => 5000 %>
接着添加JavaScript文件为视图,无需安装。如果你使用Google Charts,需要添加代码:

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
使用HighCharts:

<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

实际上,Chartkick并不依赖于Ruby/Rails。

<script src="/path/to/chartkick.js"></script>
<div id="chart-1"></div>
<script>
  var chart = document.getElementById("chart-1");
  new Chartkick.PieChart(chart, {"Football": 45, "Soccer": 56, "Basketball": 98});
  // or remote
  new Chartkick.LineChart(chart, "/charts/stocks"); 
</script>


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/2237

更多»
热门资源
ECharts
一个使用 JavaScript 实现的开源可视化库
官网
GitHub
SVG.js
包括各种形状、线条、文本、路径等元素
官网
GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网
GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网
GitHub
g2
一套基于可视化编码的图形语法
官网
GitHub
Chartist.js
JavaScript响应式图表库
官网
GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网
GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网
GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网
GitHub
C3.js
基于D3.js开发的JavaScript库
官网
GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网
GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网
GitHub
类似于Chartkick的资源
tikzcd-editor
一个用于创建可交换图的简单可视化编辑器
官网
GitHub
vue-trend
采用Vue.js实现的简单,优雅spark图表
官网
GitHub
F2.js
面向移动端的一套基于可视化图形语法的图表库
官网
GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网
GitHub
model-viewer
一个Web组件用于在Web和AR中轻松显示交互式3D模型
官网
GitHub
nvd3.js
一个用 d3.js 写的可重用的图表库
官网
GitHub
Visual Alchemist
基于Web的开源数据库图表制作和自动化工具
点击进入
GitHub
github-profile-summary
可视化GitHub概况的工具
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。