ichartjs的數據動態賦值，js的數據結構。

時間 2019-11-05
原文原文鏈接
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp" %>
<?xml version="1.0" encoding="utf-8"?>
<imag>
<script>
    <![CDATA[ 
$page.onload = fre();

     function fre(){
      var url = '${host}/image/lineChart1';               
      $http.get(url,function(data){
       var objs = eval(data);
       if(objs==null||objs.length<=0){
        return;
       }
       var map = objs[0];
       var name = map.name;
       var value=map.value;
       var day = map.day;
       var hour = map.hour!=null?map.hour.toString():"";
       var _hours = "";
       //對day處理，將其轉化爲字符串形式的數組。
       if(hour.indexOf(",")!=-1){
        var hs = hour.split(",");
        var status = false;
        for(var i = 0 ; i < hs.length;i++){
         _hours+="\""+hs[i]+"\",";
         status = true;
        }
        if(status){
         _hours = _hours.substring(0,_hours.length-1);
        }
        
       }
       //var src = 
       //alert(hour);
       var html = $('web').html ;        
       var hint = html.substring(html.search('var'),html.search(';'));
                //設置          
       var mfunction = "var value= ["+value+"];"+ 
                  "var hour= ["+_hours+"];"+ 
        "var data = ["+
        "         {"+
        "          name : \"實際發電量\","+
        "          value:value,"+
        "          color:'#0d8ecf',"+
        "          line_width:3"+
        "         }"+
        "      ];"+
        "var chart = new iChart.LineBasic2D({"+
        "   render : 'canvasDiv',"+
        "   data: data,"+
        "   title : '"+name+day+"電站實際發電量',"+
        "     turn_off_touchmove:true,"+
        "   width : 1350,"+
        "   height : 450,"+
           //能夠動態顯示比較。
           /*tip:{
             enable:true,
             shadow:true
            },*/   
        "   legend : {"+
        "     enable : true,"+
        "     row:1,"+
        "     column : 'max',"+
        "     valign:'top',"+
        "     sign:'bar',"+
        "     background_color:null,"+
        "     offsetx:-80,"+
        "     border : true"+
        "    },"+
        "   coordinate:{height:'90%',background_color:'#f6f9fa'},"+
        "   sub_option:{"+
        "    hollow_inside:false,"+
        "    point_size:16"+
        "   },"+
        "labels:hour,"+
        "  });"+
        "chart.draw();";
              $('web').exec(mfunction);
              //alert(mfunction);
      });
       
      
     }
     
     
     $page.setInterval(function(){
      fre();
      hint("圖已更新");
     },1000*60*20);
         ]]>
</script>
   <page  style="background:#ecf0f1">
  <title  style="background:navigator.png">
    <left>
   <%@ include file="../common/backButton.jsp" %>
 </left>
    <center>
         <label>${title}</label>
    </center>
     <right>
   <button onclick="tuichu();" style="background:left.png"></button>
 </right>
 
  </title >
  <content>
  <button onclick="fre();">刷新</button>
  <web id="web" include="ichart.1.2.min.js" scalable="true" >
    <![CDATA[
    <html>
  <head>
  </head>
  
  <body>
  <div id="canvasDiv">
  </div>
  </body>
</html>
     ]]>
  </web>    
  </content>
 
</page>
</imag>  _hours+="\""+hs[i]+"\",";
js的數據存儲，類型轉化處理。