介绍

sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小,五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小,体现在它的体积上,代码只有 8kb,如果经过服务器的Gzip压缩,那就更小了,因此不用担心造成项目代码冗余。

该库使用 canvas 实现,兼容 IE9 以上浏览器,支持移动端。

使用指南

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

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

<script src="schart.min.js"></script>

使用简单:

new sChart(canvasId, options);

即可生成一个图表。

canvasId:canvas标签的id,必填。

options:图表配置参数,可选,具体参考文档

不同类型图表格式都相同,可以同个数据生成不同图表。

vue相关

vue-schart:是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。

仓库地址:https://github.com/lin-xin/vue-schart

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

总结

当然,现在有很多成熟的图表库,Chart.js、echarts等等,有着丰富的图表和炫酷的效果。这个库当然不足以与它们相媲美。

但是很多时候我的项目追求的是小,我并不需要用到那么多的功能,我只想展示一下就OK。那它们也可以按需引用,是吧?

所以我觉得,适合自己项目的,才是最好的!

sChart.js:一个小型简单的图表库的更多相关文章

  1. 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~

    今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...

  2. 准备开发一个基于canvas的图表库,记录一些东西(一)

    开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...

  3. Epii.js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  4. 图表库 - Highchart / Echart

    当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery. 实际问题:引入Jquery需在图表库前,否则报错. HighChart官网:https://www.h ...

  5. BlazorCharts 原生图表库的建设历程

    作者:陈超超 Ant Design Blazor 项目贡献者,拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,现就职于正泰集团. 邮箱:timchen@live.com 欢迎各位读 ...

  6. iOS图表库Charts集成与使用

    Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...

  7. Android图表库MPAndroidChart(十三)——简约的底部柱状图

    Android图表库MPAndroidChart(十三)--简约的底部柱状图 我们继续上一讲,今天还是说下柱状图,这个图的话应该是用的比较多的,所有拿出来溜溜,先看下效果 我们还是来看下基本实现 一. ...

  8. Android图表库MPAndroidChart(一)——了解他的本质,方能得心应手

    Android图表库MPAndroidChart(一)--了解他的本质,方能得心应手 我们项目中经常会遇到一些统计图,比如折线图,线形图等,在一些运动健康类的App中尤其的常见,这画起来要命,我以前就 ...

  9. Flutter ChartSpace:通过跨端 Canvas 实现图表库

    基于Flutter 的图形语法库,通过跨端 Canvas ,将基于 Javascript 的图形语法库 ChartSpace 扩展至 Flutter 端 作者:字节跳动终端技术--胡珀 背景 数据平台 ...

随机推荐

  1. memcached+tomcat转发forward时 sessionid一直变化的问题

    今天遇到了一个很奇怪的问题, 我在tomcat过滤器 中, 对请求过来的静态资源及html页面做了forword转发操作,核心代码如下: private void redirectMobile(Htt ...

  2. 一次young gc耗时过长优化过程

    1    问题源起 上游系统通过公司rpc框架调用我们系统接口超时(默认超时时间为100ms)数量从50次/分突然上涨到2000次/分,在发生变化时间段里我们的系统也没有做过代码变更,但上游系统的调用 ...

  3. 第八章 Hibernate数据操作技巧

    第八章   Hibernate数据操作技巧8.1 分组统计数据    语法:[select]... from ...[where] [group by...[having...]] [order by ...

  4. 事件驱动的简明讲解(python实现)

    关键词:编程范式,事件驱动,回调函数,观察者模式 作者:码匠信龙 举个简单的例子: 有些人喜欢的某个公众号,然后去关注这个公众号,哪天这个公众号发布了篇新的文章,没多久订阅者就会在微信里收到这个公众号 ...

  5. IOS 程序运行过程

    第一次写有点小紧张  希望大家多多指教! 主要讲讲程序从点击运行到结束这个过程中后面的代码都有哪些变化. 首先先了解一下UIApplication.UIApplication的核心作用是提供IOS运行 ...

  6. while循环语句的几种方式

    我们知道,在Python中经常我们要使用循环,其中最常用的是while循环,while有很多结合方式,我们知道,如果一个循环没有结束语句那么就失去了意义,所以我们一定要有结束语句,下面来看看while ...

  7. 开通阿里云 CDN

    CDN,内容分发网络,主要功能是在不同的地点缓存内容,通过负载均衡技术,将用户的请求定向到最合适的缓存服务器上去获取内容,从而加快文件加载速度. 阿里云提供了按量计费的CDN,开启十分方便,于是我在自 ...

  8. placeholder各种浏览器兼容问题

    只要在页面上引入placeholder.min文件,再以$('input,textarea').placeholder(); 就可以兼容ie等各种浏览器. placeholder.min.js文件链接 ...

  9. 实现图片的循环滚动——JS的简单应用

    首先默认都了解JS的循环分支运算符等基本语法 用CSS实现简单的布局也是会的. 然后我们就可以来了解一下 [DOM 树节点] 它分为三大类:元素节点.文本节点.属性节点 文本节点跟属性节点为元素节点的 ...

  10. 开始使用gentoo linux——gentoo安装笔记(下)

    gentoo安装笔记(下) 上一章,已经对操作系统安装做了充分准备,并且已经从livecd(u盘系统)切换进入了gentoo安装环境中. 不过现在才是真正的开始!打起精神!这可不是在装ubuntu! ...