C3.js - 一款Javascript可视化图表插件

发布时间: 编辑:CINDY 0人评论 934次浏览 jQuery插件
摘要 : C3.js是一款功能强大的Javascript可视化图表插件,它提供了丰富的图表种类(拆线图、饼图、柱状图等),强大的API及通过简单的调用即可完成精美的可视化报表,酷炫的交互及动态的效果也给带来了极好的视觉体验。
C3.js是一款功能强大的Javascript可视化图表插件,它提供了丰富的图表种类(拆线图、饼图、柱状图等),强大的API及通过简单的调用即可完成精美的可视化报表,酷炫的交互及动态的效果也给带来了极好的视觉体验。C3提供了各种API和回调方法来访问图表的状态。通过使用它们,您可以在图表呈现之后实时的更新它。他同样支持在移动端使用。C3.js - 一款Javascript可视化图表插件

C3.js使用说明

以下示例展示了使用C3.js构建一个简单的图表应用。

C3.js - 一款功能强大的Javascript可视化图表插件

1、首先引用C3.js的样式及脚本


<link href="css/c3.min.css" rel="stylesheet">
<script src="js/d3.v5.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>


2、定义一个图表容器id为chart,并在之后进行调用。默认情况下C3.js会查找id为chart的容器,如果你使用了别的名称的容器就要给bindto属性指定该容器id。通过简单的调用及指定图表数据就可以生成美观的可视化报表。
<div id="chart"></div>
<script>
  var chart = c3.generate({
  bindto: '#chart',
  data: {
        x: 'x',
        columns: [
            ['x',"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            ['啤酒',100,115,120,130,135,140,190,260,300,252,200,180,120],
            ['汽水',90,105,110,112,115,180,290,360,420,352,200,110,100],
            ['白酒',510,450,330,300,280,280,290,380,450,452,460,466,520]
         ],
         type: 'spline',
         labels: true
    },
    legend: {
       position: 'bottom'
    },
    axis: {
        x: {
            type: 'category',
            tick: {
                rotate: -70,
                multiline: false
            },
                    height: 70
         }
     },
     title:{
         text:"饮料销售走抛图"
      },
 });
</script>

3、如果要修改图表的尺寸可以通过设置width或者height来指定,如果没有指定该属性它将参照元素的父元素
size: {
  width: 680
  height: 480
}

4、如果要自定义图表标题可以通过设置title属性来设置图表的标题
title:{
   text:"饮料销售走抛图"
}

5、通过设置type属性可以改变图表的风格,支持的属性值如下:
line
spline
step
area
area-spline
area-step
bar
scatter
stanford
pie
donut
gauge
data: {
  type: 'bar'
}

6、如果要修改标题的样式如改变字体大小等请修改类样式.c3-title
 .c3-title{font-weight:bold;font-size:16px;}
通过设置labels属性为true将数值显示在图表上

data: {
  labels: true
}
7、默认图表上的数据说明是在底部的,当然这个可以通过修改legend属性来改变它的位置。当前只支持bottom,right,和inset
legend: {
   position: 'bottom'
}

8、C3.js提供了数据说明的交互事件,如点击事件、鼠标移入移出事件,更多API请参考官网
legend: {
  item: {
    onclick: function (id) { ... },
    onmouseover: function (id) { ... },
    onmouseout: function (id) { ... }
  }
}

9、C3支持多种数据来源可以通过一个url属性指定一个csv文件,可以指定数组,也可以是JSON格式的数据等,通过x属性指定x轴的值。


data: {
   x: 'x',
   columns: [
        ['x',"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        ['啤酒',100,115,120,130,135,140,190,260,300,252,200,180,120],
        ['汽 水',90,105,110,112,115,180,290,360,420,352,200,110,100],
        ['白酒',510,450,330,300,280,280,290,380,450,452,460,466,520]
    ],
    type: 'stanford',
    labels: true
}


C3.js官网地址

https://c3js.org/

https://c3js.org/reference.html


查看更多

转载必须注明来自:https://huajiakeji.com/jquery/2020-10/3977.html

Quick Javascript Switcher(JS模块插件)

Quick Javascript Switcher(JS模块插件)

0 人评论 343 次人浏览 4.0分 4.0 分
Quick Javascript Switcher是谷歌浏览器上的JS模块插件,用了这个插件你可以自由的搜索,启用,禁用JS模块,给开发人员提供便利,不要错过。
JavaScript Notepad

JavaScript Notepad

0 人评论 12926 次人浏览 4.0分 4.0 分
JavaScript Notepad是一款可以编写并立即验证javascript正确性的谷歌浏览器插件。
JetBrains IDE Support

JetBrains IDE Support

0 人评论 46224 次人浏览 3.7分 3.7 分
JetBrains IDE Support是一款webstorm网页开发调试工具,支持HTML/CSS/JavaScript编辑和JavaScript调试。
JavaScript Editor

JavaScript Editor

0 人评论 30944 次人浏览 3.6分 3.6 分
JavaScript Editor插件是一款Chrome浏览器中的非常实用且强大的Javascript编辑器。
Creately: 图表与协作

Creately: 图表与协作

0 人评论 8281 次人浏览 2.6分 2.6 分
Creately是一款屡获殊荣的图表制作工具,可以通过最简单的方法绘制流程图、思维导图、UML图、组织结构图、线框图、网络图和其他40多种图表类型。
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?