如何使用HighChart使用JSON

下面一張圖中繪製多行是我在一個grpah繪製多行代碼，但它不，T工作如何使用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> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
    <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 line2 = $.parseJSON(document.getElementById("test").value); 
alert(line2); 
var mydata = [ 
]; 
var mydata1 = [ 
]; 
var mydata2 = [ 
]; 
for (var i = 0; i < line2.length; i++) { 
    //mydata[0].push([line2[i].time,line2[i].valueint]); 
    mydata.push(line2[i].time); 
    mydata1.push(line2[i].valueint); 
    mydata2.push(line2[i].valueint1); 
} 
console.log(mydata,mydata1); 

$('#container').highcharts({ 
    title: { 
     text: 'Vitals Chart', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: 'Temperature (°C)', 
     x: -20 
    }, 
    xAxis: { 
     title: { 
      text: 'Date & Time' 
     }, 
     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 
     }, 
     { 
     name: 'Temp', 
     data: mydata2     

    }] 
}); 
    }); 
    </script> 
    </head> 

    <body> 


    <input type="hidden" id="test" value='[{"time":"2013-06-27 20:28:04","valueint":40","valueint1":64},{"time":"2013-07-0110:41:29","valueint":11","valueint1":11},{"time":"2013-07-17 18:55:02","valueint":40","valueint1":43}] 
    '> 

    <div id="container" style="min-width: 400px; height: 450px; margin: 0 auto"></div> 

    </body> 
    </html>

如果任何人有這個想法，請更新此代碼爲JSFidle.Actuallu即時通訊在JSP Web應用程序中執行此操作在單線圖中的代碼中，它的工作原理非常完美，但在多行代碼中它是一個錯誤

來源

2013-07-18 user2493093

如何在單個圖表中繪製多條線 – user2493093

它不起作用，因爲Highcharts使用時間戳（以毫秒爲單位的時間）所以日期如「2013-06-27 20:28:04」是不正確的。 "valueint":40"有額外的quate。如果你有一個push對象，你需要使用y參數，而不是自定義名稱。

來源

2013-07-18 09:17:12

先生，沒有valueint1它效果很好查看此鏈接直播jsFiddle：jsfiddle.net/4MQp5/2但使用valueint1它不起作用。請更新此代碼 – user2493093

直播小提琴：[link ]（jsfiddle.net/4MQp5/2） – user2493093

鏈接是好的，但一切正常，因爲我看到了，所以你可以附加鏈接到錯誤的圖表？ –

如何使用HighChart使用JSON

回答

相關問題