文章标题

最新推荐文章于 2023-09-15 10:43:03 发布

轻轻一颗草

最新推荐文章于 2023-09-15 10:43:03 发布

阅读量459

点赞数

分类专栏： web前段 java

本文链接：https://blog.csdn.net/byp502955177/article/details/68924164

版权

java 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

web前段

3 篇文章 0 订阅

订阅专栏

<%@ 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>

action

dao

轻轻一颗草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题

<%@ 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>
复制链接

扫一扫