C3.js入门案例
C3.js是基于D3.js开发的JavaScript库，它可以让开发者构建出可复用的图表，并且还提供了一系列图表上的交互行为。通过C3，只需要往generate函数中传入数据对象就可以轻松的绘制出图表，方便开发者使用。接下来，一步步来完成一个小案例创建。
1.安装
在C3.js的代码托管地址（https://github.com/c3js/c3）下载c3-master，里面有我们构建图表所必须的文件，其中最主要的就是c3.css、c3.min.js。由于C3依赖于D3，所以你也需要下载D3，我们可以在http://d3js.org/下载最新版本的d3.js，也可以在https://github. com/mbostock/d3/tags下载之前的版本。下载解压后找到我们需要的文件d3.min.js。
2.创建图表
创建的文件目录如下：
c3通过传递参数调用generate()方法来生成图表，并且图表中的元素将会被作为bindto（绑定）的指定选择器。
- 1_c3demo.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>c3demo1</title>
<!-- 加载c3.css文件-->
<link href="c3.css" rel="stylesheet" type="text/css"> <!-- 加载d3.js和c3.js -->
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
</head>
<body>
<!--准备绑定图表的元素-->
<div id="chart"></div>
</body>
<script>
// 调用generate()方法
var chart = c3.generate({
// 参数获取
data: {
url: './data/c3_test.csv' // 通过url获得csv格式数据
}
});
// 设定延时函数setTimeout
setTimeout(function () {
c3.generate({
// 参数获取
data: {
url: './data/c3_test.json',// 通过url获得json数据
mimeType: 'json'
}
});
}, 2000);
</script>
</html>
- c3_text.json:
{
"data1": [220, 240, 270, 250, 280],
"data2": [180, 150, 300, 70, 120],
"data3": [200, 310, 150, 100, 180]
} - c3_text.csv:
data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280
3.图表显示
使用浏览器打开1_c3demo.html
初始打开显示（数据来自c3_text.json）：
两秒后显示如下图（数据来自c3_text.csv）：
C3.js入门案例的更多相关文章
- three.js 入门案例
最近公司需要用tree.js实现一个3D图的显示,就看了官方文档,正好有时间,就记录下来. 由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面.后 ...
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）
SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Node.js 入门手册：那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- node.js(小案例)_实现学生信息增删改
一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
随机推荐
- 微信小程序 保存图片
微信小程序 保存图片 注: 此处使用的是小程序 wepy框架, 原生或其他的请注意转换写法 <div class="handle"> <button class= ...
- SDTP协议
转载于 http://blog.csdn.net/fan_hai_ping/article/details/11797449 SDTP协议细则
- 每个开发者都应该知道的SOLID原则
每个开发者都应该知道的SOLID原则 单一职责原则(SRP) 它为什么违反了 SRP? 这种设计将来会带来什么问题? 开闭原则(OCP) 如何使它(AnimalSound)符合 OCP? 里氏替换原则 ...
- 代码格式化工具 AStyle
Astyle是一个用来对C/C++代码进行格式化的工具,在windows或者linux都有对应的版本,下面介绍几个本人比较常用的参数 --style=linux 个人比较喜欢linux风格,即函数的 ...
- Code First EF 多对多时拆分两个一对多
(*)多对多中还可以为中间表建立一个实体方式映射.当然如果中间关系表还想有其他字段,则要必须为中间表建立实体类(中间表和两个表之间就是两个一对多的关系了). demo项目 WebApp22 GitHu ...
- [Http] Difference between POST and GET?
What is the difference between POST and GET HTTP requests? GET and POST are two different types of H ...
- maven——将jar安装到本地仓库
环境变量MAVEN_HOME配置正确后,cmd窗口执行此命令: mvn install:install-file -Dfile=C:\hehe.jar -DgroupId=com.rockontro ...
- python3速查参考- python基础 2 -> if语句应用 + while循环应用
if语句应用之——求最大值 """ 求三个数字中的最大值,并打印出来 """ a = int(input("a:")) ...
- JS&和&&-T
&&逻辑与 &按位与(转换为二进制运算) console.log(1&2); console.log(1&&2); 上面打印的结果是什么呢? 先复习一下 ...
- GIL全局解释器锁，线程池与进程池 同步异步，阻塞与非阻塞，异步回调
GIL全局解释器锁 1.什么是GIL 官方解释:'''In CPython, the global interpreter lock, or GIL, is a mutex that prevents ...