动态生成曲线图 hightchats

最新推荐文章于 2022-07-14 10:14:48 发布

原创最新推荐文章于 2022-07-14 10:14:48 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

14 篇文章

订阅专栏

后台

 @RequestMapping("quxiantu")
       @ResponseBody
       public List  quxiantu() {


        List<Ploy>  list= studentService.showzhuzhuangtu();

           return list;   


       }

前端

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">


$(document).ready(function() { 
var seriesArry = [];
$.ajax({
    url:'../sh/quxiantu',
    type:'post',
    dataType:'json',
    async:false,
    success:function(data){
        alert(data.length);

        for(var i =0 ;i < data.length; i++ ){
            var dataHigh = "";
            dataHigh += "{name:'"+data[i]['development']+"',";
            alert(data[i]['development']);

            dataHigh += "data:"+data[i]['pname']+"}";
            alert(data[i]['pname']);
            seriesArry.push(eval('('+dataHigh+')'));


        }
    }
}); 
alert(seriesArry);

var categories = [];
var datas = [];
for(var i=0;i<seriesArry.length;i++){




    categories.push(seriesArry[i]['name']);
    alert(seriesArry[i]['name']);
    datas.push(seriesArry[i]['data']);



}
alert(categories);

alert(datas);
var title = {
          text: '城市平均气温'   
       };
       var subtitle = {
          text: 'Source: runoob.com'
       };
       var xAxis = {
          categories: categories
       };
       var yAxis = {
          title: {
             text: 'Temperature (\xB0C)'
          },
          plotLines: [{
             value: 0,
             width: 1,
             color: '#808080'
          }]
       };   

       var tooltip = {
          valueSuffix: '\xB0C'
       }

       var legend = {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
       };

       var series =  [
          {
             name: 'Tokyo',
             data: datas
          }
       ];

       var json = {};

       json.title = title;
       json.subtitle = subtitle;
       json.xAxis = xAxis;
       json.yAxis = yAxis;
       json.tooltip = tooltip;
       json.legend = legend;
       json.series = series;

       $('#container').highcharts(json);
    });

</script>



</body>
</html>

另一篇柱状图有详细内容