C3.js入门案例

本文隶属于分类

Web开发

推荐文章

广告推荐

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:java   设定   -i   传递参数   edi   解压   行为   rip   代码托管   

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

标签:java   设定   -i   传递参数   edi   解压   行为   rip   代码托管   

原文:http://www.cnblogs.com/ch-n/p/6060175.html

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区