首页 > 代码库 > C3.js入门案例

C3.js入门案例

2024-08-20 17:32:57   220人阅读

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入门案例


联系
我们