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 ...
随机推荐
- polya置换
UVA10294 POLYA定理的基本应用 题意:有n个珠子围成的环,有t种颜色可以染这些珠子:如果这个环可以旋转有几种办法:如果这个环可以旋转,且可以翻转,有几种办法: 参考博客 刘汝佳的分析: 等 ...
- arcgis python获得字段唯一值
arcgis python获得字段唯一值 # Import native arcgisscripting moduleimport arcgisscripting, sys# Create the g ...
- 宝塔安装Nextcloud，挂载在阿里云oss上，打造个人/企业高效私有云盘
如下未完整整理,看懂看不懂随缘.... 准备条件: 1.阿里云oss 2.阿里云ecs 3.环境:centos7.x 步骤: 1.centos中安装宝塔面板 2.下载NextCloud安装包,上传到宝 ...
- LC 265. Paint House II
There are a row of n houses, each house can be painted with one of the k colors. The cost of paintin ...
- Git入门之在IDEA中使用Git上传maven项目
下载安装git客户端: 参考博文:https://www.cnblogs.com/java-maowei/p/5950930.html 在IDEA怎么使用git上传spring的maven项目详解: ...
- 006-top查看计算机信息
1.使用top命令基本信息 us:用户态使用的cpu时间比sy:系统态使用的cpu时间比ni:用做nice加权的进程分配的用户态cpu时间比id:空闲的cpu时间比wa:cpu等待磁盘写入完成时间hi ...
- 各种集合key，value能否为null
转: 各种集合key,value能否为null 2019年03月12日 13:22:58 mingwulipo 阅读数 238 HashMap key,value都可以为null static f ...
- 数位dp作业
dp东西实在太多,昨天开了个树形dp入门,还没入呢,今天就要写数位dp,也不知道这种学习状态对不对啊? A - 不要62 题意: 输入n到m内,符合条件的数的个数.条件:不含62和4. 这里直接学习q ...
- 0-linux简介
linux是什么? linux有什么用? linux学了能做什么? 潜台词:linux能找什么工作?有没有钱和前途? linux要学什么? 服务的安装,配置,维护 保障服务/系统/业务的稳定,能长期不 ...
- QTP的安装（转载）
1.WIndows10安装QTP时需注意版本的要求. 2.安装参考 下载链接:https://download.csdn.net/download/weixin_41479750/11240466 下 ...