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 ...
随机推荐
- TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器
TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器 任务清单 给自己取一个酷酷的id,并选择1-2个喜欢的方向.(只是初步选择,后期可更改) 改下群名片.例如yo ...
- 【软件工程】Beta冲刺（3/5）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 新增数据分析展示等功能API 服务器后端部署,API接口的beta版实现 展示 ...
- zabbix server端与agent端源码安装 自定义监控项
ZabbixServer的安装(只有源码装zabbix才能装支持java) 搭建自定义yum仓库并安装支持包 yum -y install createrepo #下载依赖关系命令 createrep ...
- [转]MySQL查询语句执行过程详解
Mysql查询语句执行原理 数据库查询语句如何执行?语法分析:首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树.语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是 ...
- 003-tomcat配置文件-server、tomcat-users
1.server.xml讲解 位于conf下 <?xml version="1.0" encoding="UTF-8"?> <!-- Serv ...
- Highcharts的常用属性及导出SVG
做了好几个项目都用到了Highcharts,好用自然不用多说,这里总结一下每次作图经常用的一些配置,方便以后查看. 引入Highcharts非常简单,只需引入对应的js,页面中写入存放表格的div,j ...
- Visual Studio Code 帮助查看器，指定的用于安装帮助内容的位置无效，或者您无权访问该位置
今天有个C# 类库文件里面的属性想要了解下,想到了Vs的帮助文档,其实也就是微软的MSDN:提示帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置: 最近两天vs也没有更新,并且也没有 ...
- 3-3 man手册介绍
man手册介绍 内容表示的意义: 各部分功能说明: SECTION: name:命令的名称及功能描述: SYNOPSIS:命令使用格式摘要: DESCRIPTION:详细描述信息: OPTIONS:选 ...
- Nmap简介
nmap — 网络探测工具和安全/端口扫描器,参考<Nmap参考指南> 描述: Nmap (“Network Mapper(网络映射器)”) 是一款开放源代码的 网络探测和安全审核的工具. ...
- python数值列表
使用range函数生成数值列表 使用range函数打印1~5的数字 for i in range(1,6): print(i) 输出 1 2 3 4 5 利用range函数生成数值列表 >> ...