前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基于highcharts封装了一个插件。组件暴露一个Hxt的全局对象,它有以下一些方法来绘制不同类的图形,从此以后,画图只需简简单单的几行配置就ok了!赶紧点进来看看实例吧!

Hxt.line(elem, data, options);         //渲染默认折线图
Hxt.spline(elem, data, options); //曲线图
Hxt.scatter(elem, data, options); //散点图
Hxt.bubble(elem, data, options); //bubble图
Hxt.column(elem, data, options); //柱状图
Hxt.bar(elem, data, options); //bar图,(横向柱状图)
Hxt.area(elem, data, options); //区域图(默认为平滑区域图)
Hxt.pie(elem, data, options); //圆饼图
Hxt.polar(elem, data, options); //雷达图
Hxt.pyramid(elem, data, options); //金字塔图
Hxt.mix(elem, data, options); //混合图

怎么样?很简洁吧?什么?你说:没有demo你说个毛线???

好吧,由于博客园不好自定义页面,所以我把demo放到了自己的网站了,你可以点这里看demo

这个页面有三个具有代表性的图形(条形图,圆形,混合图),但是缺点呢?demo图形不全面,并且没有demo对应的代码。如果你不能接受!那么你可以选择下面这个方案!

查看github项目仓库

这就是封装的插件的仓库地址,读者们如果有这个需求,可以直接用!,步骤如下:

  • 直接clone代码到本地

    git clone https://github.com/luckykun/highextend.git
  • 到项目目录下,执行命令npm install安装依赖包

    npm install
  • 然后执行gulp就可以看到所有demo了。

    gulp

这里的demo中心一应具全,而且能够看到每个demo的对应的代码。有需求的读者们,赶快行动起来吧!!如果大家觉得还有用的话,帮我star一下啦~~~多谢多谢!

下面是本地运行的效果图:

基于highcharts封装的组件-demo&源码的更多相关文章

  1. C#开源录音组件、录像组件、录屏组件及demo源码

    在多媒体系统中,一般都会涉及到录音.录像.录屏问题,采集得到的数据可以用来传输.播放.或存储.所以,对于像课件录制系统.语音视频录制系统.录屏系统等,多媒体数据的采集就是最基础的功能之一. MCapt ...

  2. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  3. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  4. [c#]asp.net开发微信公众平台(7)前6篇的整体框架demo源码

    这里给出的demo是具备整体框架的微信公众平台源码, 所谓demo就是拿过去就可以直接演示使用的东西,  当然不会具备非常详细的具体到业务层面.数据层面的东西, 每个人都可以在此基础上自由发挥,  只 ...

  5. Asp.net MVC集成Google Calendar API(附Demo源码)

    Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...

  6. winserver的consul部署实践与.net core客户端使用(附demo源码)

    winserver的consul部署实践与.net core客户端使用(附demo源码)   前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...

  7. (原)阅读Android-Camera2Video的demo源码和调试心得

    转载请注明出处:http://www.cnblogs.com/lihaiping/p/6142512.html   最近因为项目需要使用到camera的功能,所以针对官方的demo源码进行一番阅读,并 ...

  8. 基于nopCommerce的开发框架(附源码)

    .NET的开发人员应该都知道这个大名鼎鼎的高质量b2c开源项目-nopCommerce,基于EntityFramework和MVC开发,拥有透明且结构良好的解决方案,同时结合了开源和商业软件的最佳特性 ...

  9. 基于Android开发的天气预报app(源码下载)

    原文:基于Android开发的天气预报app(源码下载) 基于AndroidStudio环境开发的天气app -系统总体介绍:本天气app使用AndroidStudio这个IDE工具在Windows1 ...

随机推荐

  1. Java 抽象类的理解

    1. 基本概念 用abstract修饰的类是抽象类.如果类中有方法是abstract类型的,那么此类肯定是abstract类型的,也就是说此类的修饰符肯定有abstract(也就是说,有抽象方法的类是 ...

  2. 用SQL语句创建四个表并完成相关题目-10月18日更新

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  3. 使用未付费的账号真机调试 iOS 程序,过几天后程序一打开就会闪退

    使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退.   解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...

  4. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  5. MVC4做网站后台:用户管理 ——用户组

    用户管理这块包含用户和用户组两部分. 用户组包括浏览 用户组列表,添加.修改.删除用户组等.按照前面思路系统是依据用户组来判断用户权限的,用户组的最主要目的是划分权限.权限这块以后单独在做. 下面实现 ...

  6. IOS数据存储之FMDB数据库

    前言: 最近几天一直在折腾数据库存储,之前文章(http://www.cnblogs.com/whoislcj/p/5485959.html)介绍了Sqlite 数据库,SQLite是一种小型的轻量级 ...

  7. MyCAT常用分片规则之分片枚举

    MyCAT支持多种分片规则,下面测试的这种是分片枚举.适用场景,列值的个数是固定的,譬如省份,月份等. 在这里,需定义三个值,规则均是在rule.xml中定义. 1. tableRule 2. fun ...

  8. CHECK_NRPE: Received 0 bytes from daemon. Check the remote server logs for error messages.

    今天,在用icinga服务器端测试客户端脚本时,报如下错误: [root@mysql-server1 etc]# /usr/local/icinga/libexec/check_nrpe -H 192 ...

  9. 从客户端(&)中检测到有潜在危险的 Request.Path 值

    首先,这个问题出现在 ASP.NET MVC 应用程序中,所以下面的解决方式都是在这个环境下. 关于这个问题,网上又很多的答案,当时也搜了一些: A potentially dangerous Req ...

  10. java 线程 Thread 使用介绍,包含wait(),notifyAll() 等函数使用介绍

    (原创,转载请说明出处!谢谢--http://www.cnblogs.com/linguanh/) 此文目的为了帮助大家较全面.通俗地了解线程 Thread 相关基础知识! 目录: --线程的创建: ...