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的资源
smoothie
是个极小的图表库,专为实时流媒体数据设计的
官网
GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网
GitHub
rete
一款用于可视化编程和创建节点编辑器的Js框架
官网
GitHub
deck-of-cards
一款非常炫酷的HTML5扑克牌卡片动画类库
官网
GitHub
Chartify
简单、轻量级的React.js插件来构建动画可拖动的图表
官网
GitHub
DataEase
人人可用的开源 BI 工具,数据可视化神器
官网
GitHub
mapv
地图可视化工具库
官网
GitHub
mo.js
强大的JavaScript动画图形,一个svg图形库
官网
GitHub
目录

手机扫一扫预览

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

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