Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
阿里云优惠券
卓越的云计算技术和服务提供商
沁言学术
AI智能学术研究平台,覆盖科研全流程服务
周易国学网
基于周易、八字、紫微斗数等传统国学文化
fly63工具箱
简单、易用、便捷的在线工具
AI应用助手
一站式AI工具平台,为工作和学习提供智能解决方案
简约导航
一款清新简洁,免费无广告的导航网站
豆包AI
字节跳动旗下 AI 智能助手
扣子Coze
职场AI,就用扣子
衡天云
海外云服务器12元/月起,限量抢购,超高性价比

资源分类

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的资源
apexcharts.js
一个现代化 JavaScript 图表库
官网
GitHub
BaklavaJS
基于 Vue3 + TypeScript 的浏览器端图节点编辑器
官网
GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网
GitHub
lenis
平滑滚动的Js动画库
官网
GitHub
mapv
地图可视化工具库
官网
GitHub
nivo.js
React数据可视化库
官网
GitHub
jdenticon
独特几何头像生成器
官网
GitHub
VisualDL
一个可视化深度学习的框架
官网
GitHub
目录

手机扫一扫预览

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

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