sChart.js：一個小型簡單的圖表庫

linshuai發表於2017-05-31
JS

介紹

sChart.js 作為一個小型簡單的圖表庫，沒有過多的圖表型別，只包含了柱狀圖、折線圖、餅狀圖和環形圖四種基本的圖表。麻雀雖小，五臟俱全。sChart.js 基本可以滿足這四種圖表的需求。而它的小，體現在它的體積上，程式碼只有 8kb，如果經過伺服器的Gzip壓縮，那就更小了，因此不用擔心造成專案程式碼冗餘。

該庫使用 canvas 實現，相容 IE9 以上瀏覽器。

使用指南

$ npm install schart.js
import sChart from 'schart.js'複製程式碼

也可以直接插入script到你的HTML頁面:

<script src="http://open.omwteam.com/sChart/static/js/sChart.min.js"></script>複製程式碼

使用簡單：

new sChart(canvasId, type, data, options);複製程式碼

即可生成一個圖表。

canvasId：canvas標籤的id，必填。

type：圖表型別，必填。

options：圖表配置引數，可選，具體參考文件。

data：要生成圖表的資料，格式為：

data:[
    {name: 'xx', value: 'yy'}
]複製程式碼

name則為座標值，value則為柱狀資料值。

其他型別的圖表data格式都相同，可以同個資料生成不同圖表。

vue相關

vue-schart：是用vue.js封裝了 sChart.js 的一個庫。方便在vue的專案中使用。

倉庫地址：github.com/lin-xin/vue…

在專案中使用了 vue-schart 的有：vue-manage-system

總結

當然，現在有很多成熟的圖表庫，Chart.js、echarts等等，有著豐富的圖表和炫酷的效果。這個庫當然不足以與它們相媲美。

但是很多時候我的專案追求的是小，我並不需要用到那麼多的功能，我只想展示一下就OK。那它們也可以按需引用，是吧？

所以我覺得，適合自己專案的，才是最好的！

相關文章