使用C3.js進行資料視覺化

下載

#解壓縮https://github.com/c3js/c3/releases/tag/v0.7.1

初始化

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

Line Chart

產生div

<div id="chart"></div>

# simple_multiple.js

var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
require.config({
baseUrl: '/js',
paths: {
d3: "http://d3js.org/d3.v5.min"
}
});

require(["d3", "c3"], function(d3, c3) {
c3.generate({
...
});
});

更詳細請參考下列官網的教學

Getting Started

Examples

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store