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

来源:http://www.cnblogs.com/linxin/archive/2017/05/31/6922473.html
-Advertisement-
Play Games

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


介紹

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

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

使用指南

$ npm install schart.js
import sChart from 'schart.js'

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

<script src="http://test.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的項目中使用。

倉庫地址:https://github.com/lin-xin/vue-schart

在項目中使用了 vue-schart 的有:vue-manage-system

總結

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

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

所以我覺得,適合自己項目的,才是最好的!

更多文章:lin-xin/blog


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學習vue時寫的一個小demo 雖然實現很簡單,但還是推介看看,沒什麼難點,而且有些東西你可能會用到!線上演示demo源碼 ...
  • mongoose.connect('mongodb://username:[email protected]:27017/qianxunkefu_db')換成mongoose.connect('mongodb://username:[email protected]:27017/qianxunk ...
  • 《jQuery基礎教程(第4版)》是jQuery經典技術教程的*升級版,涵蓋jQuery 1.10.x和jQuery2.0.x。本書前6章以通俗易懂的方式講解了jQuery的核心組件,包括jQuery的選擇符、事件、動畫、DOM操作、Ajax支持等。第7章和第8章介紹了jQueryUI、jQuery ...
  • 這是Webpack+React系列配置過程記錄的第五篇。其他內容請參考: 第一篇:使用webpack、babel、react、antdesign配置單頁面應用開發環境 第二篇:使用react-router實現單頁面應用路由 第三篇:優化單頁面開發環境:webpack與react的運行時打包與熱更新 ...
  • 一、after()和before()方法的區別 after()——其方法是將方法裡面的參數添加到jquery對象後面去; 如:A.after(B)的意思是將B放到A後面去; before()——其方法是將方法裡面的參數添加到jquery對象前面去。 如:A.before(B)的意思是將A放到B前面去 ...
  • 轉載自:http://blog.csdn.net/lun379292733/article/details/8169807/ <script type="text/JavaScript"> /* * 手機號碼格式 * 只允許以13、15、18開頭的號碼 * 如:13012345678、1592922 ...
  • 使用NodeJS & SocketIO & Express & EJS & MongoDB打造多人線上聊天室。 ...
  • IE6下有不少奇怪的Bug,今天就碰到一個,float:right換行bug,情況是併列的幾個塊級元素如div和span,一些設置了左浮動一些設置右浮動,一行的寬度足夠放下所有的塊級元素,但此時ie6則顯示右浮動的其中一塊換行了,下麵給出實例和解決方法: 實例說明下:html結構如下 <div> < ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...