极客小秘籍 —— HTML强大图标库C3



  • 0_1475461494767_jikexiaomiji_logo.png

    HTML强大图表库 C3

    C3是一款用于html5上绘制图表的库,基于D3库设计,但是相比D3, 大大减少了其使用复杂度。它的依赖文件只有D3,使用时只需先引入D3即可。这里简单地引用了其官网的教程代码, “戳原文”。让我们一起来看看C3是怎么简便易用的吧。

    Set Up & Basic Usage

    bower install c3 --save
    <!-- Load c3.css -->
    <link href="/path/to/c3.css" rel="stylesheet" type="text/css">
         <div id="chart"></div>
    <!--此处忽略html head body标签-->
    <!-- Load d3.js and c3.js -->
    <script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
    <script src="/path/to/c3.min.js"></script>
    

    Set up 之后,在js文件里添加c3.generate就可以使用啦。以直线图为例,参数"bindto"指明所要绑定的element的id, data为作图数据,columns指明图中线(块,柱)的数目。

    var chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ]
        }
    });
    

    C3也支持AMD API, 使用requirejs, 就可以看到load的结果:
    0_1475461524764_picture1.png

    举个小例子🌰

    以上我们我看到c3.generate.一个非常basic的用法,当然我们也可以自定义很多其他的部分,比如 Additional Axis,Show Axis Label,Change Chart Type,Format values 等等。

    var chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          axes: {
            data2: 'y2'
          },
          types: {
            data2: 'bar'
          }
        },
        axis: {
          y: {
            label: {
              text: 'Y Label',
              position: 'outer-middle'
            },
            tick: {
              format: d3.format("$,") // ADD
            }
          },
          y2: {
            show: true,
            label: {
              text: 'Y2 Label',
              position: 'outer-middle'
            }
          }
        }
    });
    

    0_1475461537039_picture2.png
    关于自定义的format, 也可以直接在css文件里加样式:

    #chart .c3-line-data2 {
      stroke-width: 5px;
    }
    

    使用API动态加载数据

    如果一个库不能动态加载数据,那跟咸鱼有什么区别?

    chart.load({
      columns: [
        ['data1', 300, 100, 250, 150, 300, 150, 500],
        ['data2', 100, 200, 150, 50, 100, 250]
      ]
    });
    

    所以当我们给第一个例子设置一个按钮,点击按钮,图表的数据就会自动更新并绘制,而且自带fade效果。
    0_1475461560978_picture3.png
    当然也可以使用chart.unload去unload图表,或者同时load一些数据并unload另一些数据,注意:Please use unload param in load() API if load and unload need to run simultaneously.

    chart.load({
            columns: [
                ['data1', 130, 120, 150],
                ['data4', 30, 20, 50],
            ],
            unload: ['data2', 'data3'],
        });
    

    我们也可以show/hide某条数据:

    chart.hide(['data2', 'data3']);
    chart.show(['data2', 'data3']);
    

    学习资源

    C3官网链接:(http://c3js.org)
    长按或扫描下面二维码进入C3的Github主页:

    0_1475461577865_qr_code.jpg

    原文:github:zzs1020
    改编:太阁唧哈(Github)小组

    极客小秘籍太阁唧哈(Github)小组出版的专注于推广Github开源项目的系列短文。如果对我们感兴趣,请微信联系cosmo89929 ~


登录后回复
 

与 BitTiger Community 的连接断开,我们正在尝试重连,请耐心等待