图形的插件使用

最新推荐文章于 2021-05-26 05:14:40 发布

老夫西瓜

最新推荐文章于 2021-05-26 05:14:40 发布

阅读量369

点赞数 2

本文链接：https://blog.csdn.net/X_Android/article/details/79639934

版权

一、引入JQuery文件和highcharts文件

二、必须给highcharts一个DOM容器，并设置大小

<div id="tuxing" style="width:600px;height:400px"></div>

三、通过Highcharts函数Highchats.charts来创建图表，并给该函数两个值，分别是：DOM容器的ID和图表配置（注意要写在<script>内）

var chart=Highcharts.chart('tuxing',options);

四、图表配置

	<html>
	<head>
	<title>图形插件</title>
	</head>
	
	<body>
	<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	
	<div id="tuxing" style="width:600px;height:400px"></div>
	
	<script>
		
		<!--图表配置 -->
			var options={
			chart:{
			type:'area'	//图表类型
			},
			
			title:{
				text:'学习时间'		//图表标题
			},
			
			xAxis:{
			categories:['语文','数学','英语']		//x轴分类
			},
			
			yAxis:{
				title:{
					text:'学习时间'					//y轴标题
				}
			},
			
			series:[{					//数据列
				name:'1号',				//数据列名
				data:[7,0,8],			//数据
				},{
				name:'2号',			//数据列名
				data:[7,7,2]			//数据
			}]
			
			};
			
			//图表初始化函数
			var chart=Highcharts.chart('tuxing',options);
	</script>
	
	
	
	<script src="jquery-3.1.1.js"></script>
	</body>
	
	</html>

五、运行结果