前段时间做的项目中需要用到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. WCF学习之旅—WCF概述(四)

    一.WCF概述 1) 什么是WCF? Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架.借助 WCF,可以将数据作为异步消息从一个服务终 ...

  2. Sql Server系列:键和约束

    1 约束的类型 约束可以分为3大类:实体约束.域约束和参照完整性约束. 1.1 实体约束 实体约束都是关于比较行的,实体约束并不关心整体列中的数据,它只对特定行感兴趣. 1.2 域约束 域约束处理一个 ...

  3. 【Win10应用开发】通过拖放来打开文件

    除了可以使用XXXFilePicker来浏览文件外,其实在UWP APP中,也可以向传统Windows窗口一样,通过拖放的方式来打开文件. 处理过程和WPF的原理差不多,毕竟都是一脉相承,于是,在学习 ...

  4. 鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 m ...

  5. Visulalization Voronoi in OpenSceneGraph

    Visulalization Voronoi in OpenSceneGraph eryar@163.com Abstract. In mathematics a Voronoi diagram is ...

  6. OpenCascade Primitives BRep-Torus

    OpenCascade Primitives BRep-Torus eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  7. Memory Management in Open Cascade

    Open Cascade中的内存管理 Memory Management in Open Cascade eryar@163.com 一.C++中的内存管理 Memory Management in ...

  8. 动态给div中新增html

    小颖最近接触的项目中用到了    innerHTML 所以小颖今天就自己做了个demo,当当当当代码请看下方: 页面效果:

  9. 深入学习jQuery节点关系

    × 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...

  10. ubuntu 配置git公钥

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...