Question

这是我在单个grpah中绘制多行的代码，但它没有工作

<%@ 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应用程序中执行此操作在此代码中单线图其工作完美但在多行中它们是错误的

Answer 1

它不起作用，因为Highcharts使用时间戳（以毫秒为单位的时间），因此“2013-06-27 20:28:04”之类的日期不正确。 "valueint":40"有额外的好处。如果您有推送对象，则需要使用带有值的y参数，而不是自定义名称。

如何使用带有JSON的HighChart在单个图形中绘制多条线

1 个答案: