前言

由于公司业务需要做一些图标来展示一些数据，之前都是用百度的echart.js。这次放弃使用它转而自己开发是有几个原因
1、echart文件太大，有些功能用不到
2、echart样式不易扩展
3、需求简单
考虑上面几个原因就决定自己开发一个图标库，主要介绍折线图和雷达图

技术研究

绘制图表可以用canvas、svg、webgl等，echart是用canvas绘制，所以我就直接考虑用canvas。
折线图：通过lineto将点连起来
雷达图：由外向内，通过arc、fill等方法绘制

主要问题

1、折线图转成曲线
通过网上查找资料，按照腾讯这篇文章来实现http://www.alloyteam.com/2015/08/zhe-xian-zhuan-qu-xian/
2、图片文字模糊
问题分析和解决这里已经总结https://github.com/baixuexiyang/wchart/wiki/canvas%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E6%A8%A1%E7%B3%8A

代码地址

https://github.com/baixuexiyang/wchart

自己开发图表插件，脱离echart的更多相关文章

  1. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  2. JavaWeb图表插件的小研究

    背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...

  3. 图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  4. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  5. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  6. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  7. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

  8. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

  9. python开发vim插件

    [python开发vim插件] 按如下方式使用python开发vim插件,注意调用时使用的是exec. 但在函数中嵌入python代码更为简便,如下: python如何传递参数给python: 代码头 ...

随机推荐

  1. php抽奖概率算法（刮刮卡，大转盘）

    两种方法:①概率随着抽的奖项的变少而时刻变化 经典的概率算法函数:如下 <?php /*  * 经典的概率算法,  * $proArr是一个预先设置的数组,  * 假设数组为:array(20, ...

  2. foreach和for循环的区别

    for循环 for循环,通过下标,对循环中的代码反复执行,功能强大,可以通过index取得元素.在处理比较复杂的处理的时候较为方便. foreach循环 foreach,从头到尾,对于集合中的对象遍历 ...

  3. 从C#到TypeScript - function

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  4. .Net开源oss项目进度更新(含小程序接口)

    和大家分享下当前OSS开源项目的进度情况: 一. OSS.Common [开源中国] [github] 经过昨天的努力,oss.common项目初步完成了对.net standard的支持,迁移过程本 ...

  5. angular、vue使用感受

    最近开始学习并使用vue.js,并使用vue+node开发了一个移动端APP来练手,下面想聊聊我对于vue的粗浅看法,并将它和angular进行一些对比: 1.vue是一个轻量.高效的前端组件化框架, ...

  6. linux网卡配置

    6.3网卡配置 DEVICE=eth0 TYPE=Ethernet BOOTPROTO=dhcp ONBOOT=yes NETMASK=255.255.255.0 GETWAY=192.168.1.2 ...

  7. window编程之win程序框架

    int APIENTRY _tWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance, _In_ LPTSTR lpCmd ...

  8. 了解 : angular $filter stateful

    {{ abc | myFilter }} angular.module('myStatefulFilterApp', []) .filter('decorate', ['decoration', fu ...

  9. 小红帽5.9 配置静态IP上网问题

    本来无一物,何处染尘埃. DHCP连得好好的,手痒试下STATIC,静态IP 首先进入/etc/sysconfig/network-scripts/ifcfg-eth0, 写入各种参数: BOOTPR ...

  10. redhat linux enterprise 5 输入ifconfig无效的解决方法

    redhat linux enterprise 5 输入ifconfig无效的解决方法   在安装完成linux后,进入终端,输入命令行ifconfig,会提示bash: ifconfig: comm ...