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：报表的数据，这是最重要的一个地方，报表的灵魂就在这里，数据是数组格式。
标注之后的报表：
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
