highchart图表控件封装调用(持续更新……)

/**
 * @author wsf hightcharts封装调用
 */
;
(function (win,$){
	$.chartDataCache = {};//图表数据缓存
	/**
	 * hightchart扩展
	 */
	function myChart (){
		this.colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',  '#FFF263', '#6AF9C4'];
		this.chartType={};
		this.title = "";//主标题
		this.subtitle = "";//子标题
		this.foottitle = "";
		this.pointWidth = 50;//图像宽度
	    this.yAxis = "收入"; //y坐标标题
	    this.tooltip = "元";
	    this.legend = {
			    itemDistance: 50,
			    borderWidth: 1,
			    shadow: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF')
	    };//图例
	    this.data = [];//数据对象
	    
	}
	/**
	 * 原型对象
	 */
	myChart.prototype = {
		constructor:myChart,//构造函数
		//生成图表
		createChart:function (container,data,flg){
			var that = this;
			var opt = null;
			if(flg&&flg == "muti")
				opt = that.parse2xAxisAndChartdataMulti(data);//将数据解析为横坐标和chart数据(多维度)
			else
				opt = that.parse2xAxisAndChartdata(data);//将数据解析为横坐标和chart数据
			$.chartDataCache[flg] = opt;//缓存数据
			container.highcharts({
				chart: that.chartType,
				title:{
					text:that.title,
					x:0
				},
				xAxis:{
					categories:opt.x
				},
				yAxis:{
						title : {
							text : this.yAxis
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
				},
				plotOptions: {
			        series: {
			            pointWidth: this.pointWidth
			        }
				},
				tooltip:{
					valueSuffix:that.tooltip
				},
				legend:that.legend,
				series:opt.d
			});
		},
		//把请求回来的数据解析为横坐标和chart数据
		parse2xAxisAndChartdata:function (data){
			var opt = {};
			opt.x = [];//横坐标
			opt.d = [];//chart数据
			var _ddata = [];
			for(var i in data){
				var _nm = $.trim(data[i].name);//名称
				var _d = parseFloat(data[i].data);//数据
				opt.x.push(_nm);
				var td = {color:this.colors[i],y:_d};
				_ddata.push(td);
			}
			opt.d.push({name:this.foottitle,data:_ddata});
			return opt;
		},
		//把请求回来的数据解析为横坐标和chart数据(多维度)
		parse2xAxisAndChartdataMulti:function (data){
			var opt = {};
			opt.x = [];//横坐标
			opt.d = [];//chart数据
			var gpdata = this.groupData(data);
			opt.x = gpdata[1];//月份
			for(var i in gpdata[0]){
				var tmpdata = {};
				var name = gpdata[0][i];
				tmpdata["name"] = name;
				tmpdata["data"] = [];
				for(var j in data){
					var tdata = data[j];
					var _nm = $.trim(tdata.name);
					var _d = parseFloat(tdata.data);//数据
					if(_nm == name){
						tmpdata["data"].push(_d);
					}
				}
				opt.d.push(tmpdata);
			}
			return opt;
		},
		//js分组
		groupData:function(data,groupname){
			var ret = [];
			var tempret = [];
			var tempret2 = [];
			var names = {},times={};
			for(var i in data){
				var tdata = data[i];
				var _nm = $.trim(tdata.name);
				var _time = $.trim(tdata.time).substring(4);//时间
				if(!names[_nm]){
					tempret.push(_nm);
					names[_nm] = 1;//标示已经添加过
				}
				if(!times[_time]){
					tempret2.push(parseInt(_time,10)+"月");
					times[_time] = 1;//标示已经添加过
				}
			}
			ret.push(tempret);
			ret.push(tempret2);
			return ret;
		},
		//创建饼图
		createPieChart:function (container,data,flg){
			this.chartType = {  
	             type:"pie"//饼图
	         };  
            this.createChart(container,data,flg);

		},
		//创建折线图
		createLineChart:function (container,data,flg){
			this.chartType = {
					type:"line"//折线图
			};
			this.createChart(container,data,flg);
		},
		//创建柱状图
		createColumnChart:function (container,data,flg){
			this.chartType = {
					type:"column"//柱状图
			};
			this.createChart(container,data,flg);
		},
		//创建柱状图
		createBarChart:function (container,data,flg){
			this.chartType = {
					type:"bar"//横向柱状图
			};
			this.createChart(container,data,flg);
		}
	}
	win.myChart = myChart;//外部调用入口
})(window,jQuery);

 

 

highcharts 半封装工具类 highcharts 半封装工具类 测试用待完善 Highcharts 是一个用纯JavaScript编写的一个图表库。 Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习、个人网站和非商业用途使用。 立即下载

相关推荐

High Speed Chart 动态绘图控件

资源内提供的是High Speed Chart 动态绘图控件所需要的多种头文件与源文件

delphi 停电文本数据丢失_2019数据可视化图表资源专题来了,哪一款才是您的最佳选择...

想要做出高大上的数据可视化图表,但又不知道怎么入手?别担心,今天小编为大家整合了目前比较火热的图表工具,让您在短短10分钟内也能制作出高逼格的数据可视化图表。不管你是小白,还是资深用户,这些图表工具将会让您工作起来更加心应手。赶快来看看吧!图表推荐这些图表工具,您不能不知道!AnyChart灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。Highcharts纯Ja...

weixin_39942213的博客 159

SwordfishCharts

wpf图表控件 wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件wpf图表控件

Echarts概述

前端校招精编面试解析大全点击这里免费获取完整版pdf查看062123)]前端校招精编面试解析大全点击这里免费获取完整版pdf查看。

2401_84092360的博客 810

Highcharts封装

highchart,chart,highcharts,c#,javascript,图表

解决fetch_california_housing数据集403错误的3种实用方法(附手动下载地址)

本文针对机器学习中常见的fetch_california_housing数据集403 Forbidden错误,提供了三种实用的解决方案。从理解HTTP 403错误的根源出发,详细介绍了修改源码路径、使用国内镜像源以及手动下载并配置数据文件这三种方法,并附带了可靠的手动下载地址,帮助开发者彻底解决数据加载障碍,确保机器学习项目顺利进行。

weixin_29062963的博客 561

highcharts.js进行多图表封装

为什么80%的码农都做不了架构师?>>> ...

weixin_34324081的博客 383

从二极管到CMOS:手把手教你搭建数字电路中的基础门电路(附原理图)

本文详细介绍了数字电路中基础门电路的搭建方法,从二极管门电路到现代CMOS门电路的设计与实现。通过原理图解析和实战案例,帮助读者掌握数字电路设计的核心知识,包括电平实现、门电路工作原理及实际调试技巧,适合电子技术爱好者和初学者学习参考。

weixin_29252171的博客 321

Web 版翻译者资料库

本项目是桌面版《翻译者资料库》的 Web 移植版,基于 Spring Boot 3.3、Thymeleaf、Bootstrap 5.3 与 MySQL 8.0 构建。它面向翻译写作提供资料、词汇、句库、文本工具、对照制作、查找、备份恢复及旧库迁移等功能,完整继承桌面版核心业务规则,支持一键启动与离线访问。

howard2005的专栏 144

[0352]基于JAVA的停车场收费智慧管理系统的设计与实现

其次,从经营管理层面考虑,本系统涵盖了丰富的月卡管理和财务结算功能,如月卡用户管理、缴费、注销、挂失、解挂、补办等全流程服务,以及临保和月保的结算汇总与欠费查询等功能,这不仅有助于规范停车场的日常运营管理,更能有效提高财务管理效率,降低运营成本,实现精细化、数字化的财务管控。综上所述,本课题计划研发的基于Java的停车场收费智慧管理系统将在现有研究成果的基础上,重点优化月卡用户全生命周期管理和财务统计分析功能,以满足现代停车场高效、精准、安全的管理需求,紧跟行业发展趋势,为推动智慧城市的建设贡献一份力量。

muyu2980的专栏 589

ESP32开发环境避坑指南:用Thonny烧录MicroPython固件时常见的5个错误及解决方法

本文针对ESP32开发新手,详细解析了使用Thonny IDE烧录MicroPython固件时最常见的5个错误及其解决方案。内容涵盖驱动安装、端口识别、固件烧录失败、版本兼容性、连接不稳定以及文件系统操作异常等核心痛点,并提供硬件层面的深度排查指南,帮助开发者高效搭建稳定的ESP32开发环境。

weixin_29189003的博客 407

副队长BootStrap5探究(2)--按钮与按钮组

本文系统讲解Bootstrap 5按钮组件的使用与底层原理。通过CDN引入框架,掌握btn基础类及primary、success等主题色应用,学习轮廓按钮(btn-outline-*)、尺寸控制(btn-lg/sm)、块级布局(d-block)和禁用状态(disabled)等实用功能。结合源码解析,深入理解其基于CSS的圆角、过渡动画、伪类交互实现机制,实现“快速上手+原理掌握”的双重目标,助力前端技能进阶。

编程副队长 642

Python 爬虫实战:科研数据库学术论文数据抓取

在科研工作中,学术论文是获取前沿知识和研究方法的重要资源。然而,手动从科研数据库中查找和整理论文信息往往耗时费力。幸运的是,Python 爬虫技术可以自动化这一过程,帮助我们高效地抓取和管理学术论文数据。本文将详细介绍如何使用 Python 爬虫技术抓取科研数据库中的学术论文数据,并进行全字段提取和文献管理,助力科研工作。

u014481728的博客 945

V8 机制、手写核心函数与 TypeScript 类型体操

或固定初始化(如数组先定长、对象先给全字段)保持类型与形状稳定;这些都比"换框架"更基础。只能处理纯数据(丢函数、Date、RegExp、循环引用报错)。生产级深拷贝要处理:原始值短路、循环引用、V8(Chrome / Node 的 JS 引擎)不是"解释一行跑一行"那么简单,它用。图:V8 执行流程——解释执行 + 热点优化,优化失败会 Deopt 回退。JS 内存自动管理,但"自动"不等于"不会漏"。是"固定间隔最多执行一次"。手写 Promise 是"懂异步"的试金石。是"停下后才执行最后一次",

qq_38468358的博客 348

手把手教你学simulink(12.10)--设计和仿真一个用于控制飞机纵向运动(高度和速度)的多变量控制系统

飞机的纵向运动控制是航空工程中的一个重要问题,涉及飞机的高度和速度的精确控制。多变量控制系统可以同时控制多个飞行参数,确保飞机在最佳条件下运行。Simulink提供了一个强大的平台,用于建模、仿真和分析动态系统,非常适合设计和测试多变量控制系统。通过本项目的实施,我们成功设计和仿真了一个用于控制飞机纵向运动(高度和速度)的多变量控制系统。该项目展示了从系统建模、控制器设计、仿真验证到结果分析的完整流程,为多变量控制系统的设计提供了有价值的参考。

MHD0815的博客 598

037、有源钳位反激变换器(ACF)原理

文章摘要 有源钳位反激变换器(ACF)是一种克服常规反激电路漏感能量处理瓶颈的高效解决方案。文章从实际炸机案例切入,指出RCD钳位电路在高压、宽范围、高功率场景下的局限性。ACF通过增加钳位管和钳位电容,将漏感能量回收而非消耗,实现效率提升2-3%、精准电压钳位和更好EMI性能。文章详细解析了ACF四阶段工作过程、关键波形特征,并指出设计陷阱:漏感需保持1%-3%特定范围、钳位电容ESR要求严格、需专用控制IC支持互补驱动。最后给出实用调试建议,强调ACF适用于65W+功率场景,低压验证后再逐步升压的调试方

Jack010169的博客 264

React 性能:memo / useMemo / useCallback

讲清 memo/useMemo/useCallback 的配合与边界,先测量再优化,避开常见过早优化。

JudithHuang的博客 327

Vue3 - [最强] 超详细 Element Plus 组件库主题颜色进行 “统一全局“ 替换,将默认的蓝色主题色更换为其他自定义颜色,覆盖原来的主题色改为自己的颜色(完美解决主题色不生效、没反应)

elementplus修改主题色,vue3+element-plus主题色更换,vue3vite如何修改扩展elementplus主题色样式,全局设置elementplus主题色,有什么办法可以直接全局修改主题色,对elementplus默认蓝色不满意怎么替换更改其他颜色,elementplus覆盖默认主题色,elementplus主题色官方文档,vue3中修改elementplus主题色,elementplus修改主题色不生效怎么办,elementplus如何修改主题颜色,eleme

🏆 前端领域优质创作者 1万+

DSH (DeepSeek Harness) Windows 升级安装指南20261107

注意:如果在普通窗口执行 nvm 提示找不到命令,或执行 nvm use 提示 Access is denied,请务必关闭当前窗口,重新打开一个管理员CMD 执行上述完整路径命令。找到 .credentials.yaml,将其重命名为 .credentials.yaml.bak(备份并使其失效)。Node.js Storage Location:可改到非系统盘(如 D:\dev\nvm,避免路径含空格或中文)。打开文件资源管理器,进入 C:\Users<你的用户名>.dsh\。

fengye207161的博客 203

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

SpringBoot「衣依」服装销售平台:144个Java文件180个接口,从挑衣服到收货评价整条链路都在

# SpringBoot「衣依」服装销售平台:144个Java文件180个接口,从挑衣服到收货评价整条链路都在 > 这是一套基于 Spring Boot 的服装销售平台源码,配套 `db.sql` 建表脚本,业务覆盖商品展示、购物车、订单流转、收货地址、订单评价、商品评论、在线客服、轮播图和资讯。形态是**前后台双端**:前台是顾客逛的商城,后台是管理员管的控制台。本文带你看清里面有什么、怎么跑

面朝大海 226

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

微信小程序-wxs

在微信开发者工具中右键创建.wxs后缀的文件。每个.wxs文件也是一个独立模块,同样使用导出内容。示例(文件return d;FOO: foo,bar: bar(外联定义参考官方文档)

dreams_dream的博客 347

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

汽车租赁系统(协同过滤算法、支付宝沙盒支付、 腾讯地图接入、WebSocket在线沟通、ECharts运营分析、三角色协同、还车费用处理)

本系统基于B/S架构,采用前后端分离设计,集成SpringBoot3、Vue2、MySQL等技术,实现用户、商家、管理员三角色协同管理。亮点包括:车型加权推荐与话题协同过滤算法提升个性化体验;支付宝沙盒支付、腾讯地图定位、WebSocket在线沟通保障流程闭环;还车费用智能计算与ECharts多维数据可视化助力运营分析,全面支持租车全生命周期管理。

paopaokaka_luck的博客 139

使用echarts模拟甘特图

项目中需按时间段展示不同颜色的数据,通过解析时长并统计各类型总时长,结合预设颜色映射表(含自定义与默认色),动态生成ECharts图表。利用sumByTypeName聚合数据,为每类分配对应颜色,实现图例与柱状图的精准匹配,确保多时段、多类型数据可视化清晰准确。

uuai 29

设计模式(unity游戏研发版)

当你使用图形用户界面类时通常会遇到一个问题。比如,你创建了自定义按钮类并允许客户端在按钮中注入自定义代码,这样当用户按下按钮时就会触发这些代码。观察者模式允许任何实现了订阅者接口的对象订阅发布者对象的事件通知。你可在按钮中添加订阅机制,允许客户端通过自定义订阅类注入自定义代码。在Unity中,这就像UnityEvent在Inspector中绑定多个回调。

m0_63330263的博客 102

【技术专题】JavaScript 网页技术 - JavaScript 流程控制

小锋老师推出《一天学会JavaScript(无废话版)》视频教程,涵盖基础语法、流程控制、函数、数组对象、DOM操作及ES6新特性。内容精炼,配套课件与源码打包下载,助力快速入门。重点讲解if/else、switch、for/while循环、for...of/in遍历及break/continue使用场景,并通过成绩判断实例演示实际应用。适合零基础学习者高效掌握核心技能。

java1234的博客 163
上一篇: java unicode 转中文(学习用)
下一篇: javascript按需加载模板
sfSam
博客等级 码龄16年 13粉丝 115原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值