c3

chart visualization ui-component

c3はD3ベースの再利用可能なチャートライブラリで、データ可視化の作成を簡素化します。さまざまなタイプのチャートをサポートし、シンプルなAPIを通じて素早くチャートを生成およびカスタマイズできます。

Latest Ver 0.7.20

Homepage

Github

9,357

📢 D3ベースでさまざまなチャートを簡単に作成できるライブラリ

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<div id='chart'></div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

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