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入门案例的更多相关文章

  1. three.js 入门案例

    最近公司需要用tree.js实现一个3D图的显示,就看了官方文档,正好有时间,就记录下来. 由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面.后 ...

  2. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）

    SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...

  5. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. Node.js 入门手册：那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

  7. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  9. 项目一:项目第二天 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 ...

随机推荐

  1. arcgis 面或线要素类上的搜索游标

    import arcpy infc = arcpy.GetParameterAsText(0) # Identify the geometry field # desc = arcpy.Describ ...

  2. centos7 python2升级python3

    安装前的准备环境 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurse ...

  3. [面试] Java高级软件工程师面试考纲(转)

    如果要应聘高级开发工程师职务,仅仅懂得Java的基础知识是远远不够的,还必须懂得常用数据结构.算法.网络.操作系统等知识.因此本文不会讲解具体的技术,笔者综合自己应聘各大公司的经历,整理了一份大公司对 ...

  4. LC 873. Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...

  5. wait_timeout 和 interactive_timeout

    wait_timeout 和 interactive_timeout Table of Contents 1. 参数说明 2. 原代码 3. interactive_timeout覆盖wait_tim ...

  6. SSM整合junit单元测试之org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    想用SSM做一点小测试,项目整合完毕,直接使用junit测试mybatis,出现如下错误(SuperTest类中进行了spring运行环境加载): 解决思路: 检查mapper接口与mapper.xm ...

  7. react-native-scrollable-tab-view第一次加载下划线不显示解决

    今天在使用react-native-scrollable-tab-view的时候出现下划线第一次显示的时候不显示,需要点击切换才可以显示. 通过各种实践发现是0.6.7版本问题. 解决实现: reac ...

  8. Spring Boot开发Web应用之Thymeleaf篇

    前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boot对Web开发的支持. 正文 Spring Boot提供了spring-boot-starter-web为Web开发予以 ...

  9. kubeadm安装集群系列-2.Master高可用

    Master高可用安装 VIP负载均衡可以使用haproxy+keepalive实现,云上用户可以使用对应的ULB实现 准备kubeadm-init.yaml文件 apiVersion: kubead ...

  10. 如何查看Nginx安装了哪些模块

    当你要编译安装Nginx时,在你执行完./configure之后,会在这个目录生成一个objs这个目录. 进入objs目录下,会看到有一个ngx_modules.c这个文件,这个文件里都是要编译进Ng ...