Chartkick:一行代码即可绘制出漂亮的图表

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" style="height: 300px;"></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>

时间: 2025-01-27 17:54:41

Chartkick:一行代码即可绘制出漂亮的图表的相关文章

Jfreechart绘制漂亮的图表

要想绘制出漂亮的图表,就必须了解图表的构成部分,将图表进行分解成N个部分. 然后再对每一个部分进行渲染,设置样式:包括背景色.轮廓线条样式和颜色.填充颜色.字体大小.样式.颜色.同时,需要确保在整个项目中,图表的样式风格整体统一,统一,和谐才能打造漂亮.干净.专业的外观. 1.使用JfreeChart创建柱状图,折线图,饼图,堆积柱状图,时间序列图,二维Y轴坐标图. 2.所有代码和示例项目代码地址:http://www.oschina.net/code/snippet_855019_36505

Java8中使用一行代码读取文件_java

JDK7中引入了新的文件操作类java.nio.file.File,它包含了很多有用的方法来操作文件,比如检查文件是否为隐藏文件,或者是检查文件是否为只读文件.开发者还可以使用Files.readAllBytes(Path)方法把整个文件读入内存,此方法返回一个字节数组,还可以把结果传递给String的构造器,以便创建字符串输出.此方法确保了当读入文件的所有字节内容时,文件属性是关闭的,否则就会出现IO异常或其它的未检查异常.这意味着在读文件到最后的块内容后,无需关闭文件. 要注意,此方法不适合

写出漂亮代码的七种方法

首先我想说明我本文阐述的是纯粹从美学的角度来写出代码,而非技术.逻辑等.以下为写出漂亮代码的七种方法: 1.尽快结束 if 语句 例如下面这个JavaScript语句,看起来就很恐怖: function findShape(flags, point, attribute, list) { if(!findShapePoints(flags, point, attribute)) { if(!doFindShapePoints(flags, point, attribute)) { if(!fin

一行js弹窗代码就能设计漂亮的弹窗广告

接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: document.writeln("<div id=\"leftDiv1\" ><a href='http://www.xiameneye.org.cn/special/zhengji/' target=_blank><img src='/templ

只需添加一行代码,即可给网站增加一个动画引导

摘要: 创业公司 Toonimo 近日宣布种子轮融资 250 万美元,Lux Partners 领投. Toonimo 希望通过给任何网站增加一个动画引导/解说小人,来帮助这些网站增加转化率.停留时间等(点这里查看效果). 创业公司 Toonimo 近日宣布种子轮融资 250 万美元,Lux Partners 领投. Toonimo 希望通过给任何网站增加一个动画引导/解说小人,来帮助这些网站增加转化率.停留时间等(点这里查看效果).这些动画小人可根据客户的需求定制样貌.服饰.性别.以及触发动画

完成简单一行代码都不写的网页设计

  这是一篇由 Chris Kellett 为大家带来的教程,只需利用Ai CC 以及Muse CC,就可以在一行代码都不写的情况下,完成简单的网页设计和发布. 不过本文仅仅简单的介绍了大体的操作流程,更多细节还需诸位仔细研究一下. 01. 用AI进行基本布局 工作流程的第一步是使用AI CC,进行基本的布局,并且创建基本的矢量图标.完成后,在图层面板中选择释放到图层(顺序).这样就能将设计导出,以供PS编辑. 02.用PS完成设计 根据AI导出的图层,用PS进行视觉设计. 03. 命名图层 用

一行代码都不用写就能完成简单的精美网页设计

这是一篇由 Chris Kellett 为大家带来的教程,只需利用Ai CC 以及Muse CC,就可以在一行代码都不写的情况下,完成简单的网页设计和发布. 不过本文仅仅简单的介绍了大体的操作流程,更多细节还需诸位仔细研究一下. 01. 用AI进行基本布局 工作流程的第一步是使用AI CC,进行基本的布局,并且创建基本的矢量图标.完成后,在图层面板中选择释放到图层(顺序).这样就能将设计导出,以供PS编辑. 02.用PS完成设计 根据AI导出的图层,用PS进行视觉设计. 03. 命名图层 用PS

编程-我这代码怎么运行出这样的结果?

问题描述 我这代码怎么运行出这样的结果? 计算机代码编程培训"> 解决方案 问题应该出在printstudent函数的传递参数i上,我在visual c++上测试了一下,如果是将结构体数据直接赋值的话,输出没有问题: struct Student { char name[20]; int age; struct Score score; }stu[2]= {"hkx",20,{95,92,90},"zl",19,{99,98,97}}; 但是如果是在

弹窗-在js代码中执行到某一行代码中手动暂停,然后在手动启动执行

问题描述 在js代码中执行到某一行代码中手动暂停,然后在手动启动执行 我js代码中执行到某一行代码的时候,我想手动的暂停在某一行代码. 然后在通过手动的方式在启动执行下面的代码. 例如:我想在函数a中调用了函数b,而函数b的作用是弹出窗口,让用户输入信息. 我想获取到弹窗用户输入的信息在a函数中用. 但是现在实现的结果不理想.在执行完b函数弹窗的时候,a函数继续往下执行. 获取不到弹窗的用户输入的信息. 那位大神给个思路... 解决方案 function playVideo(){ player.