基于highcharts封装的组件-demo&源码
前段时间做的项目中需要用到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对应的代码。如果你不能接受!那么你可以选择下面这个方案!
这就是封装的插件的仓库地址,读者们如果有这个需求,可以直接用!
,步骤如下:
直接clone代码到本地
git clone https://github.com/luckykun/highextend.git
到项目目录下,执行命令npm install安装依赖包
npm install
然后执行gulp就可以看到所有demo了。
gulp
这里的demo中心一应具全,而且能够看到每个demo的对应的代码。有需求的读者们,赶快行动起来吧!!如果大家觉得还有用的话,帮我star
一下啦~~~多谢多谢!
下面是本地运行的效果图:
基于highcharts封装的组件-demo&源码的更多相关文章
- C#开源录音组件、录像组件、录屏组件及demo源码
在多媒体系统中,一般都会涉及到录音.录像.录屏问题,采集得到的数据可以用来传输.播放.或存储.所以,对于像课件录制系统.语音视频录制系统.录屏系统等,多媒体数据的采集就是最基础的功能之一. MCapt ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- [c#]asp.net开发微信公众平台(7)前6篇的整体框架demo源码
这里给出的demo是具备整体框架的微信公众平台源码, 所谓demo就是拿过去就可以直接演示使用的东西, 当然不会具备非常详细的具体到业务层面.数据层面的东西, 每个人都可以在此基础上自由发挥, 只 ...
- Asp.net MVC集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- winserver的consul部署实践与.net core客户端使用(附demo源码)
winserver的consul部署实践与.net core客户端使用(附demo源码) 前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...
- (原)阅读Android-Camera2Video的demo源码和调试心得
转载请注明出处:http://www.cnblogs.com/lihaiping/p/6142512.html 最近因为项目需要使用到camera的功能,所以针对官方的demo源码进行一番阅读,并 ...
- 基于nopCommerce的开发框架(附源码)
.NET的开发人员应该都知道这个大名鼎鼎的高质量b2c开源项目-nopCommerce,基于EntityFramework和MVC开发,拥有透明且结构良好的解决方案,同时结合了开源和商业软件的最佳特性 ...
- 基于Android开发的天气预报app(源码下载)
原文:基于Android开发的天气预报app(源码下载) 基于AndroidStudio环境开发的天气app -系统总体介绍:本天气app使用AndroidStudio这个IDE工具在Windows1 ...
随机推荐
- Python框架之Tornado(一)
本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...
- CRM/ERP 企业管理软件中常见的七种程序设计模式
管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1 RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...
- 最大连续子序列乘积(DP)
题目来源:小米手机2013年校园招聘笔试题 题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 输入: 输入可能包含多个测试样例.每个测试样例的第一行仅包含正整数 ...
- 高级javascript---原型和原型继承
高级javascript---原型和原型继承 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函数用作构造函数 ...
- Oracle启动报错ORA-27102解决
环境:RHEL5.5 + Oracle 10.2.0.4 此错误一般是因为数据库的初始化参数文件的内存设置不当导致.本例是因为操作系统参数设置问题导致. 当前现象:Oracle启动报错ORA-2710 ...
- 【Android】[转] Android屏幕旋转使用OrientationEventListener的监听
说明 遇到一个奇葩的问题,我在使用onConfigChanged拦截屏幕的横竖屏旋转时,发现直接进行180度的横屏/竖屏转换居然没有反应!查找原因发现仅对landscape或者portrait状态有用 ...
- Sql Server 聚集索引扫描 Scan Direction的两种方式------FORWARD 和 BACKWARD
最近发现一个分页查询存储过程中的的一个SQL语句,当聚集索引列的排序方式不同的时候,效率差别达到数十倍,让我感到非常吃惊 由此引发出来分页查询的情况下对大表做Clustered Scan的时候, 不同 ...
- 【十大经典数据挖掘算法】CART
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 前言 分类与回归树(Class ...
- 【Kylin实战】Hive复杂数据类型与视图
1. 引言 在分析广告日志时,会有这样的多维分析需求: 曝光.点击用户分别有多少? 标签能覆盖多少广告用户? 各个标签(标注)类别能覆盖的曝光.点击在各个DSP上所覆盖的用户数 -- 广告数据与标签数 ...
- 艾伦 Visual Studio 批量自动化代码操作工具-VS插件发布
艾伦 Visual Studio 批量自动化代码操作工具 以下简称--艾伦工具箱. 艾伦工具箱是一个多文件批量处理插件,目的是为了广大开发者提高开发效率,减少项目代码规范化审计,缩短开发者的项目开发周 ...