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:报表的数据,这是最重要的一个地方,报表的灵魂就在这里,数据是数组格式。
标注之后的报表: