java 版本 HightCharts demo

 

                 HightCharts例子

1.引用js

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

<script src="highcharts.js"></script>

<script src="exporting.js"></script>

2. Jsp 

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

 

<script type="text/javascript">

$(function(){

/* var jsonStr = '[{"stuName":[{"name":"Tom"},{"name":"Jack"},{"name":"jony"}],"className":[{"class":"基础日语"},{"class":"中级日语"},{"class":"Java SE"}]}]';

var jsonO = eval("("+jsonStr+")");   

alert(jsonO[0].stuName[0].name); */

var containerobj =  hn.datetimechart('container');

$.post('/higthDemo/higthTest.do',

{code:'00100'},

function(data){

//alert(data);

var jd=JSON.parse(data);

//alert(jd.p[0].productdate);

//alert(jd.p2[0].productdate);

var newarr=[],newarr1=[];

for(var i=0;i<jd.p.length;i++){

var datetime=jd.p[i].productdate.substring(0,4)

+"/"+jd.p[i].productdate.substring(5,7)+"/"

+jd.p[i].productdate.substring(8,10);

newarr1.push(

[Date.parse(datetime),Number(jd.p[i].productval)]);

}

newarr.push(newarr1);

for(var i = 0; i<containerobj.series.length; i++){

containerobj.series[i].setData(newarr[i]);

}

},

'json');

});

</script>

 

3. java 控制器

@Controller

@RequestMapping("/higthDemo")

public class HigthDemo {

@RequestMapping(value="/higthTest.do")  

@ResponseBody

public String higthTest(HttpServletRequest request,HttpServletResponse response,CustomerReg customerRegtn){

String str=

"{\"p\":[{\"productdate\":\"2015/08/01\",\"productval\":\"0.1\"},{\"productdate\":\"2015/08/02\",\"productval\":\"0.2\"},{\"productdate\":\"2015/08/03\",\"productval\":\"0.3\"}],\"p2\":[{\"productdate\":\"2015/09/01\",\"productval\":\"0.11\"},{\"productdate\":\"2015/09/02\",\"productval\":\"0.12\"}]}";

return str;

}

}