Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 赞助一下
  • 关于我们

资源分类

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的资源
CamanJS
提供各种图片处理的 JavaScript 库
官网
GitHub
React Simple Maps
一个基于React创建SVG地图的组件库
官网
GitHub
tikzcd-editor
一个用于创建可交换图的简单可视化编辑器
官网
GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网
GitHub
hamburgers
超酷图标变形动画特效
官网
GitHub
Snap.svg
一个强大且直观的SVG动画内容操纵API
官网
GitHub
Sparky
一款免费的 JavaScript 波形图库
官网
GitHub
BaklavaJS
基于 Vue3 + TypeScript 的浏览器端图节点编辑器
官网
GitHub
目录

手机扫一扫预览

首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架

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