介绍

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. char , unsigned char 和 signed char 区别

    ANSI C 提供了3种字符类型,分别是char.signed char.unsigned char.char相当于signed char或者unsigned char,但是这取决于编译器!这三种字符 ...

  2. Intellij IDEA 没办法创建java文件

    然后就是具体的解释和解决方案. 如上图红圈所示,我们可以根据对项目的任意目录进行这五种目录类型标注,这个知识点非常非常重要,必须会. Sources 一般用于标注类似 src 这种可编译目录.有时候我 ...

  3. Java -- 浅入Java反射机制

    1,Java 反射是Java语言的一个很重要的特征,它使得Java具体了"动态性". Java 反射机制主要提供了以下功能: 在运行时判断任意一个对象所属的类. 在运行时构造任意一 ...

  4. React组件实现越级传递属性

    如果有这样一个结构:三级嵌套,分别是:一级父组件.二级子组件.三级孙子组件,且前者包含后者,结构如图: 如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下 ...

  5. 自动生成数学题型三 (框架Struts2)题型如 a+b=c(a、b、c都为分数)

    1. 约分分数 1.1 保留质数 /** * 将数值放入到fraction数组中 * @param fen 简要放的 int类型数值 */ public void fenshu(int fen) { ...

  6. oracle表空间扩容

    oracle在使用中会发现,表空间不足的情况:以下介绍了如何1.查询表空间使用率.剩余量:2.如何扩展表空间容量: 1.表空间容量指标查询 SELECT TABLESPACE_NAME "表 ...

  7. Elasticsearch搜索之best_fields分析

    顾名思义,best_field就是获取最佳匹配的field,另个可以通过tie_breaker来控制其他field的得分,boost可以设置权重(默认都为1). 下面从宏观上来讲的简单公式: scor ...

  8. 【Tomcat源码学习】-2.容器管理

    Tomcat作为应用服务器,我们可以理解Tomcat本身就是一个容器,用于装载应用,而作为容器本身是由若干组件以及事件构成,容器管理即为管理容器的有机组成部分.   一.Tomcat整体结构: Ser ...

  9. HTTP长连接、短连接使用及测试

    概念 HTTP短连接(非持久连接)是指,客户端和服务端进行一次HTTP请求/响应之后,就关闭连接.所以,下一次的HTTP请求/响应操作就需要重新建立连接. HTTP长连接(持久连接)是指,客户端和服务 ...

  10. Linux系统OOM killer机制详解

    介绍: Linux下面有个特性叫OOM killer(Out Of Memory killer),会在系统内存耗尽的情况下出现,选择性的干掉一些进程以求释放一些内存.广大从事Linux方面的IT农民工 ...