<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>折线图</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../highchart/highcharts.js"></script>
<script type="text/javascript" src="../highchart/highcharts-3d.js"></script>
<script type="text/javascript" src="../highchart/jdate.min.js"></script>
<script type="text/javascript" src="../highchart/dark-unica.js"></script>
<script type="text/javascript" src="../highchart/exporting.js"></script>
</head>
<script type="text/javascript">
$(function() {
//从后台获取json格式的数据
$.ajax({
type: "POST",
url: "/oa/UserAction.do?method=showLine",
dataType:"JSON",
success: function(data){
//alert(data);
var data = JSON.parse(data);
browsers = [];
var datatemp;
for(var i=0;i<data.length;i++){
var username = data[i].username;
//alert(username);
var month = data[i].month;
var febuery = data[i].febuery;
var march = data[i].march;
var april = data[i].april;
var may = data[i].may;
//alert(browsers.push([username,month,febuery,march]));
datatemp += "{name: '"+ data[i].username +"',data:["+ month +","+ febuery +","+ march +","+ april +","+ may +" ]}" + ",";
}
//去除最后一个字符
datatemp=datatemp.substring(9,datatemp.length);
//alert(datatemp.length);
datatemp=datatemp.substring(0,datatemp.length-1);
//alert(datatemp);
getAllchart(datatemp);
}
});
});
function getAllchart(datatemp){
// 设置打野下载汉化
Highcharts.setOptions({
lang: {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片" ,
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
}
});
//alert(datatemp);
$('#container').highcharts({
chart : {
type : 'line' , //指定图表的类型,默认是折线图(line)
renderTo: 'container'
},
title : {
text : '2017中科软研发平台产品统计' //指定图表标题
},
subtitle:{
text: '2017每月份研发产品统计'
},
credits:{
enabled:false
},
xAxis : {
categories : [ '一月份', '二月份','三月份' ] //指定x轴分组
},
yAxis : {
title : {
text : '数量(万)' // 指定y轴的标题
}
},
plotOptions:{
line:{
dataLabels:{
enabled:false
},
enableMouseTracking:true
}
},
exporting:
{
enabled:true,//默认为可用,当设置为false时,图表的打印及导出功能失效
buttons:{ //配置按钮选项
/* printButton:{ //配置打印按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-200,
y:20
},
exportButton:{ //配置导出按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-150,
y:20
}, */
},
filename:'统计表',//导出的文件名
type:'image/png',//导出的文件类型
width:800 //导出的文件宽度
},
series : eval("[" + datatemp + "]")
//series : [ datatemp ]
});
};
</script>
<body>
<div id="container" style="min-width:400px;height:500px"></div>
</body>
</html>
文章标题
最新推荐文章于 2023-09-15 10:43:03 发布