highcharts入门实例

最新推荐文章于 2025-10-17 09:14:30 发布

原创最新推荐文章于 2025-10-17 09:14:30 发布 · 925 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

Web前端专栏收录该内容

87 篇文章

订阅专栏

highcharts是一个javascript实现的纯web前端的报表框架，目前版本是6.1.4，他可以单独使用，也可以和jquery一起使用，一起使用时，就像使用jquery的一个插件一样，通过$("#id").highcharts(highchart_json)来生成各种报表。
如下是一个折线图，数据含义请忽略：
在这里插入图片描述
实现代码如下：

<!doctype html>
<html>
      <head>
	       <meta charset="UTF-8"/>
		   <title>hightcharts demo</title>
		   <style>
		      *{margin:0;padding:0;}
			  #container{width:800px;margin:100px auto;}
		   </style>
		   <script type="text/javascript" src="js/jquery/jquery-1.12.4.min.js"></script>
		   <script type="text/javascript" src="js/highcharts/highcharts.js"></script>
	  </head>
	  <body>
	      <div id="container"></div>
	  </body>
	  <script type="text/javascript">
	     $(function(){
		    var json = {};
			json.title = {text:"设备日活"};
			json.xAxis={	
				categories:["2018-01",
				"2018-02",
				"2018-03",
				"2018-04",
				"2018-05",
				"2018-06",
				"2018-07",
				"2018-08",
				"2018-09"]
		    };
			json.yAxis={title:{text:'活跃数'},plotLines:[{value:0,width:1,color:'cyan'}]};
			json.tooltip={valueSuffix:'\XB0C'};
			json.legend={layout:'horizontal',
						align:'center',
						verticalAlign:"bottom",
						borderWidth:0};
			json.series = [
					{name:'华为',data:[1023000,
					1036000,
					1041000,
					1082000,
					1093000,
					1064000,
					1045000,
					1026000,
					1027000]},	
					{name:'小米',data:[1003000,
					1036000,
					1040000,
					1650000,
					1060000,
					1070000,
					1028000,
					1029000,
					1020000]},
					{name:'OPPO',data:[1223000,
					1136000,
					1320000,
					1420000,
					1020000,
					1080000,
					1030000,
					1090000,
					1070000]},   
					{name:'VIVO',data:[1123000,
					1136000,
					1220000,
					1520000,
					1320000,
					1420000,
					1520000,
					1620000,
					1420000]},	   
					{name:'联想',data:[923000,
					936000,
					921000,
					922000,
					923000,
					924000,
					925000,
					926000,
					1228000]}];
			$("#container").highcharts(json);
		 });
	  </script>
</html>

构建折现报表几个关键属性：

title：报表标题，可以有子标题通过subTitle来定义。
xAxis：报表X轴，也就是横轴或水平轴，可以定义X轴的展示数据，以及展示的格式，通过type属性可以指定X轴显示的类型，比如时间type=datetime。有时候一个位置下的文字太多，展示不下，可以通过设置展示角度labels:{rotation:-45}，让文字倾斜。
yAxis：报表Y轴，也就是纵轴。
legend：图例，通常表示报表中该图例颜色代表的主体。默认是放在报表的下方，居中显示。可以修改显示位置。
series：报表的数据，这是最重要的一个地方，报表的灵魂就在这里，数据是数组格式。

标注之后的报表：
在这里插入图片描述