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 ...
随机推荐
- 【软件工程】Alpha冲刺 （6/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...
- java代理浅述
代理 代理主要可以分为: 静态代理 JDK自带的动态代理 Cglib 静态代理 静态代理比较简单,简单来说就是不想直接调用被代理类,通过代理类来实现功能.如下就是使用了静态代理 定义接口 public ...
- 用PHP自带函数对二维数组进行排序
经常会面临这样的需求,虽然有时候我们可以在数据库查询的时候,直接对数据进行排序,但还是无法满足日益复杂的业务需求. 这里边会用到两个函数 一个是array_column()函数,这个函数接受三个参数. ...
- golang 故障模拟工具failpoint的使用
测试是功能上线之前的重要环节. 测试过程中,要尽量覆盖各种场景.故障情况或异常情况下的场景测试,也是必不可少的. 如何模拟故障呢? 在FreeBSD 中, failpoints经常用来模拟故障. 在g ...
- easyUI之Accordion（分类）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- echarts.js导致angular-translate加载模块失败
echarts.js导致angular-translate加载模块失败,待解决
- [GPU] Machine Learning on C++
一.MPI为何物? 初步了解:MPI集群环境搭建 二.重新认识Spark 链接:https://www.zhihu.com/question/48743915/answer/115738668 马铁大 ...
- 两种最常用的破解centos7忘掉密码的解决方案
第一种方法:设置光盘为第一启动项 第一步:进入bios界面 虚拟机中:点击左上角的虚拟机-->电源-->打开电源时进入固件 第二步:使用左右键选择上方的boot 按住shift+ 加号 ...
- c语言求素数以及改进算法
代码需要使用c99编译 #include <stdio.h> #include <stdlib.h> #include <math.h> //是否为素数 //从2到 ...
- Centos 7.2 安装与配置JDK8
系统环境:centos7安装方式:rpm安装软件:jdk-8u25-linux-x64.rpm下载地址:http://www.oracle.com/technetwork/java/javase/do ...