2013-07-17 42 views
0

這是在jsp.But genearting圖形的碼而被fail.Actually我使用highchart開發圖形,但showeing錯誤..如何在Highchart中使用json繪製線圖?

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script> 
$(document).ready(function() { 
var line2=$.parseJSON(document.getElementById("test").value); 

    var mydata = [[]]; 
    var mydata1 = [[]]; 
    for(var i=0; i<line2.length; i++) 
    { 
     //mydata[0].push([line2[i].time,line2[i].valueint]); 
     mydata[0].push([line2[i].time]); 
     mydata1[0].push([line2[i].valueint]); 
    } 
    alert(mydata); 
    alert(mydata1); 
    $('#container').highcharts({ 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: mydata 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Temp', 
      data: mydata1 

     }] 
    }); 
}); 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<input type="hidden" id ="test" value='[{"time":"2013-07-02 18:33:52","valueint":25.000},{"time":"2013-07-02 18:34:22","valueint":27.000},{"time":"2013-07-02 18:34:52","valueint":25.000}]'> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
</body> 
</html> 

其實這是我的代碼..但不根據時間和溫度生成圖表.Alerts生成但不在圖表中,請更新此代碼。

回答

0

兩件事情:

  • 類別應該是一個字符串數組,因此:

    • 刪除多餘的陣列的位置:var mydata = [[]]; - >var mydata = [];
    • 刪除額外的數組在這裏:mydata[0].push([line2[i].time]); - >mydata.push(line2[i].time);
  • 數據應該是一個數字數組,因此可以按照與類別相同的方式刪除多餘的數組。

+0

是的,先生,我會告訴你清楚..只有一個值27顯示。請支持我繪製此圖。 – user2493093

+0

其實我想從數據庫值plor圖。所以最初從dtabse的數據被提取並存儲在隱藏文件輸入,並將其推送到json – user2493093

+0

其實我使用jsp作爲前端和postgres作爲後端 – user2493093

相關問題