<small id="nvnkc"><optgroup id="nvnkc"><sub id="nvnkc"></sub></optgroup></small>

<th id="nvnkc"><div id="nvnkc"></div></th>
  • <noscript id="nvnkc"><nobr id="nvnkc"><address id="nvnkc"></address></nobr></noscript>

  • <code id="nvnkc"><var id="nvnkc"></var></code><tbody id="nvnkc"><listing id="nvnkc"><nav id="nvnkc"></nav></listing></tbody>

    C3.js - 一款Javascript可視化圖表插件

    發布時間: 編輯:CINDY 0人評論 925次瀏覽 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


    查看更多

    轉載必須注明來自: Chrome插件 ? C3.js - 一款Javascript可視化圖表插件

    JavaScript Editor

    JavaScript Editor

    0 人評論 30875 次人瀏覽 3.6分 3.6 分
    JavaScript Editor插件是一款Chrome瀏覽器中的非常實用且強大的Javascript編輯器。
    JavaScript Notepad

    JavaScript Notepad

    0 人評論 12899 次人瀏覽 4.0分 4.0 分
    JavaScript Notepad是一款可以編寫并立即驗證javascript正確性的谷歌瀏覽器插件。
    Quick Javascript Switcher(JS模塊插件)

    Quick Javascript Switcher(JS模塊插件)

    0 人評論 307 次人瀏覽 4.0分 4.0 分
    Quick Javascript Switcher是谷歌瀏覽器上的JS模塊插件,用了這個插件你可以自由的搜索,啟用,禁用JS模塊,給開發人員提供便利,不要錯過。
    JetBrains IDE Support

    JetBrains IDE Support

    0 人評論 45983 次人瀏覽 3.7分 3.7 分
    JetBrains IDE Support是一款webstorm網頁開發調試工具,支持HTML/CSS/JavaScript編輯和JavaScript調試。
    Creately: 圖表與協作

    Creately: 圖表與協作

    0 人評論 8222 次人瀏覽 2.6分 2.6 分
    Creately是一款屢獲殊榮的圖表制作工具,可以通過最簡單的方法繪制流程圖、思維導圖、UML圖、組織結構圖、線框圖、網絡圖和其他40多種圖表類型。
    av看片免费观看网址
    評論:(0)

    已有 0 位網友發表了一針見血的評論,你還等什么?

    ?