HighCharts入门教程

最新推荐文章于 2023-12-27 13:16:22 发布

_小王子

最新推荐文章于 2023-12-27 13:16:22 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_29807693/article/details/78600271

版权

一、HighCharts简介

Highcharts 是一个用纯JS编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

二、入门案例

第一步:将Highcharts相关资源文件复制到项目中

第二步：在页面中引入相关js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/highcharts/highcharts.js"></script>
<script src="${pageContext.request.contextPath }/js/highcharts/modules/exporting.js"></script>

第三步：在页面中提供一个div，并指定id属性

<body>
	<div id="test"></div>
</body>

第四步：调用Highcharts提供的方法，动态创建图表

$(function(){
		//页面加载完成后，动态创建图表
		$("#test").highcharts({
			title: {
	            text: '各浏览器份额'
	        },
	        series: [{
	            type: 'pie',
	            name: '浏览器占比',
	            data: [
	                ['Firefox',   45.0],
	                ['IE',       26.8],
	                ['Safari',    8.5],
	                ['Opera',     6.2],
	                ['Others',   0.7]
	            ]
	        }]
		});
	});

效果展示

铸剑团队签名：

【总监】十二春秋之，3483099@qq.com；

【Master】戈稻不苍，han169@126.com；

【Java开发】雨鸶，343691194@qq.com；思齐骏惠，qiangzhang1227@163.com；小王子，545106057@qq.com；巡山小钻风，840260821@qq.com；

【VS开发】豆点，2268800211@qq.com；

【系统测试】土镜问道，847071279@qq.com；尘子与自由，695187655@qq.com；

【大数据】沙漠绿洲，caozhipan@126.com；张三省，570417591@qq.com；

【网络】夜孤星，11297761@qq.com；

【系统运营】三石头，261453882@qq.com；平凡怪咖，591169003@qq.com；

【容灾备份】秋天的雨，18568921@qq.com；

【安全】保密，你懂的。

原创作者：小王子

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

_小王子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HighCharts入门教程

一、HighCharts简介Highcharts 是一个用纯JS编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
复制链接

扫一扫