用户投稿想直接看本文重点可以直接跳过前3小节喔!
为什么会选 C3.js ?
最近在做毕业专题的时候，碰巧遇到需要将大量数据做资料视觉化的状况，为此作为网页资料视觉化小萌新的我，第一时间自然是到处找好用的API啦! 认真上网找才发现做资料视觉化的 js 函式库其实蛮多的，最初我挑的是 D3.js，不过往后爬文之后，我发现 D3.js 真的不太容易上手，因为专题有时间压力的关係，我转向使用 C3.js 做资料视觉化。
基本上 C3.js 就是简化许多的 D3.js，我们在使用 C3.js 的时候，也会需要把 D3.js 用 <script></script> 载入网页后配合 C3.js 一起使用，虽然 C3.js 有点难做到高度客製化，但对于有资料视觉化迫切需求的人来说，C3.js 算是挺不错的视觉化工具，如果之前有用过 Chart.js，那要上手 C3.js 更是如鱼得水。
如何使用 C3.js ?
依照官方网站的说明，我们需要载入 c3.css、c3.js、d3.js 这3个东西，才能开始做资料视觉化。
小补充: min.js 档跟一般 .js 档的差异在于 min.js 档去除让程式码易读的缩排空格，把程式码压缩成更少行且档案也更小，自然在载入速度上会比 .js 档快一点。
<!--Reference: https://c3js.org/gettingstarted.html--><!-- 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>我自己是比较懒得去载上面那些东西到专案资料夹下，所以使用的是 CDN 载入，像下面这样。但我必须说用 CDN 载入不是好作法，因为过多的 CDN 容易让网页程式码显得有些杂乱，想解决这个问题可以考虑使用 Webpack 这个打包工具，有兴趣的话可以自行深入研究。
<!-- Load c3.css --><link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css" rel="stylesheet"><!-- Load d3.js and c3.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script>如果真的想载上面的东西下来看的话，可以到官方的 GitHub repository 下载，以下提供连结。
C3D3C3.js 的效果展示
以 line chart 为例 :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="chart"></div></body><!-- Load c3.css --><link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css" rel="stylesheet"><!-- Load d3.js and c3.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script><script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } });</script></html>从0开始的座标轴
前面用3小节稍微介绍下 C3.js 后，终于要进入本文的正题啦!
当资料数据的最大值和最小值差距过大，y轴的数值刻度就有机会出现负数，像下面这个例子，data1 跟 data2 的数值差距过大导致 y 轴出现负值，即便在所有数据中均不存在负值。
<script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] } });</script>看过官方文件后，我试着直接把 y 轴的 min 设成 0 看看，结果当然是无效啰! 仔细查资料后，我发现官方文件中的 axis.y.min 下面有补充一句话 : Padding will be added based on this value.，所以 y 轴会有负值出现就是因为 C3.js 自动设定 y 轴 padding 的关係。
<script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] }, axis: { y: { min: 0 } } });</script>那要如何解决这个问题呢? 我们只要主动把 y 轴的 padding bottom 设成 0 或比较小的数值就可以啰! 但我比较不建议直接设成 0，因为这样连出来的线段会有机会直接贴到 x 轴上，使得整张图看起来不太美观，下面试着把 y 轴的 padding bottom 设成 5 就成功让 y 轴从 0 开始啰!
<script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] }, axis: { y: { min: 0, padding: { bottom: 5 } } } });</script>好久没写文章，趁着暑假是时候该练练了XDD。
微信扫一扫打赏
支付宝扫一扫打赏
