折线图+(饼图、柱状图）

来源：互联网发布：onvif java类库编辑：程序博客网时间：2024/05/17 09:24

遍历数据格式

$.each(ajDataNew, function(key, val) {    yset.push( val.thickmin);    name = val.station;    xset.push([val.inspectingdate +'/'+val.inspectingunit]) ;//为x轴数组赋值    growth += val.thickmin + ",";    data.push({                x: xset,                y: yset              });});

通过ajax跳转页面传参

String idd=request.getParameter("date");String ids=request.getParameter("station");

前台jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ include file="/common/taglibs.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <script src="${ctx}/js/jquery-2.0.2.min.js" type="text/javascript"></script>   <script src=" ${ctx}/js/highcharts.js"></script>   <script src=" ${ctx}/js/Highcharts-3.0.2/modules/data.js"></script>   <script></script><script type="text/javascript"><%String idd=request.getParameter("date");String ids=request.getParameter("station");%>document.title='001';var chart;      var name=null;var ajDataNew=null;$(function () {//统计图树   $.post('/pipe/tbYbPipethick/tbYbPipethickAction!photos?pipeno=<%=idd%>'+'&station=<%=ids%>', function (data) {ajDataNew = $.parseJSON(data);//data json格式console.log("newJsp data:"+ajDataNew);//[object Object]格式lo();});    });        function lo(){    var xset = [];//X轴数据集        var yset = [];//Y轴数据集      var data=[];    var growth='[';    var name=null;    $.each(ajDataNew, function(key, val) {    yset.push( val.thickmin);    name = val.station;    xset.push([val.inspectingdate +'/'+val.inspectingunit]) ;//为x轴数组赋值    growth += val.thickmin + ",";    //datetimeCom += "\'" + val.inspectingdate + "\',";    data.push({                x: xset,                y: yset              });});growth = growth.substr(0, growth.length - 1)+"]";console.log("y:"+yset+"--x:"+xset+"--data:"+data);console.log("growth:"+growth);    $('#containers').highcharts({        chart: {            type: 'line'        },        title: {            text: '编号'        },        subtitle: {            text: '<%=idd%>'        },         xAxis: {            categories:xset        },         /* yAxis: {            title: {                text: '厚度'            }        }, */        yAxis : {                 tickInterval:0.2, // 刻度值                  title: {                      text: '最小值'                  },                      },                     legend : {//                      enabled : false,                        layout: 'vertical',                        align: 'right',                        verticalAlign: 'top',        //              y: 130,                        borderWidth: 0                    //设置图例不可见                     },                    exporting : {                        enabled : false                    //设置导出按钮不可用                     },                    credits : {                        enabled: false                    },         plotOptions: {            line: {                dataLabels: {                    enabled: true  ,        // 开启数据标签                },                enableMouseTracking: true ,// 关闭鼠标跟踪，对应的提示框、点击事件会失效            },            },                 series:   [{            name: name,            data:eval(growth)        }]      });    }    </script></head><body><!-- <div id="container" style="min-width:400px;height:400px"></div><div class="message"></div> --> <div id="containers" style="min-width:400px;height:400px"></div></body></html>

2.柱状图+饼图的js方法

datagrid表格方法

grid = new Grid('${ctx}/tbYbPipethick/tbYbPipethickAction!lists','data_list');grid.loadGrid();

<jsp页面><tr>      <td style="width: 50%;height: 350px;border: 1px solid #b0dcf3;">       <div id="containerNew" style=" float: left;">      </td>      <td style="width: 50%;text-align: center;border: 1px solid #b0dcf3;" >       <div id="container" style=" float: left;">      </td></tr>

$(function() {     grid = new Grid('${ctx}/tbYbPipethick/tbYbPipethickAction!lists','data_list');grid.loadGrid(); //饼图    $.post('${ctx}/tbYbPipethick/tbYbPipethickAction!piefunction', function (data) {ajData = $.parseJSON(data);loadPieChart();});  //柱状图   $.post('${ctx}/tbYbPipethick/tbYbPipethickAction!zztfunction', function (data) {ajDataNew = $.parseJSON(data);console.log("ajDataNew:"+ajDataNew);loadPie();//lo();});});var maxNumNew = []; function getSeriesObject(ecoType, area) {var series = {};series.name = ecoType;series.y = area*1;return series;}function loadPie(){              var getInData = [];var xTxt = [];    $.each(ajDataNew,function (index,element){xTxt.push(element.plant);maxNumNew.push(element.sheetname*1);getInData.push(getSeriesObject(element.plant, (element.sheetname*1)));}); var value = eval(maxNumNew.join("+"));     $('#containerNew').highcharts({        chart: {         height:350,         backgroundColor:"#FFFFFF",             plotBackgroundColor: null,             plotBorderWidth: null,             plotShadow: false,             type: 'column',             style:{             fontWeight: 'bold'             },             options3d:{                    enabled: true,                    alpha: 5,                    beta: 10,                    depth: 50                }        },                title: {            text: '统计图',            style:{            fontSize: '20px'            }         },         exporting:{              enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示          },         subtitle: {             text: ''           },         xAxis: {            categories: xTxt,            labels: {            style: {            fontSize: '12px',//字体大小           color: '#000000'            }            }         },         yAxis: {        min: 0,        tickInterval:1,            title: {               text: '数量'            }         },         tooltip: {             formatter: function() {                 return '<b>'+ this.x +'</b><br/>'+                      Highcharts.numberFormat(this.y, 0) +                     '个';             }         },         legend: {            enabled: false         },         plotOptions: {                  column: {         pointWidth: 60,         events: {                 click: function(e) {                 }                 },                 dataLabels: {                     enabled: true,                     formatter: function() {                     return Highcharts.numberFormat(((this.y)/value)*100,2) +' %';                     }                 }         }         },         series: [{         type:'column',         name:'---',            data: getInData         }]      });               } //饼状图       function getPieObject(name, num, isMax) {var pie = {};pie.name = name;pie.y = num;//pie.id = id;if(isMax) {pie.sliced = true;pie.selected = true;}return pie; }                           var maxNum = [];  function loadPieChart(){//sheetname-pipenamevar chartData = [];$.each(ajData,function (index,element) {maxNum.push((element.sheetname*1));});var max = Math.max.apply(null,maxNum);//得到maxnum数组最大值$.each(ajData,function (index,element) {chartData.push(getPieObject(element.pipeno, (element.sheetname*1), element.sheetname == max));});$(function () {    $('#container').highcharts({        chart: {            type: 'pie',            height:350,            options3d: {                enabled: true,                alpha: 35,                beta: 0            }        },        title: {            text: ''        },        exporting:{              enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示          },        tooltip: {//             pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'formatter: function() {                    return '<b>'+ this.point.name +'</b>: '+ this.point.y +'个<b>占:</b>'+ Highcharts.numberFormat(this.percentage,2) +' %';                }        },        plotOptions: {            pie: {                allowPointSelect: true,                cursor: 'pointer',                depth: 35,                dataLabels: {                    enabled: true,                    format: ''                },        formatter: function() {                    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';                }            }        },        series: [{            type: 'pie',            name: ' ',            data: chartData        }]    });}); }

阅读全文

0 0