C3.js入门案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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入门案例的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段