Question

这是在jsp中生成图形的代码。但是代码是失败的。实际上我使用高图来开发图形，但是显示错误..

<%@ 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是生成但不在图中请更新此代码。

Answer 1

两件事：

类别应该是一个字符串数组，所以：
- 在此处移除额外数组：var mydata = [[]]; - ＆gt; var mydata = [];
- 在此处移除额外数组：mydata[0].push([line2[i].time]); - ＆gt; mydata.push(line2[i].time);
数据应该是一个数字数组，因此删除额外的数组的方式与类别相同。

如何在Highchart中使用json绘制线图？

1 个答案: