json数据传给highcharts

sky_m 发布于 2017/07/30 09:42
阅读 135
收藏 0

test.js中的程序:


    <%  
        //驱动程序名   
        String driverName = "com.mysql.jdbc.Driver";  
        //数据库用户名   
        String userName = "root";  
        //密码   
        String userPasswd = "123";  
        //数据库名   
        String dbName = "test";  
        //表名   
        //String tableName = "snp";  
        //联结字符串   
        ArrayList<String> result = new ArrayList<String>();
        ArrayList<String> result2 = new ArrayList<String>();
        ArrayList<String> result3= new ArrayList<String>();
        ArrayList<String> result4= new ArrayList<String>();
        ArrayList<String> result5= new ArrayList<String>();
       String url = "jdbc:mysql://localhost:3306/" + dbName + "?user="  
                + userName + "&password=" + userPasswd;  
        Class.forName("com.mysql.jdbc.Driver").newInstance();  
        Connection connection = DriverManager.getConnection(url);  
        Statement statement = connection.createStatement(); 
        ResultSet res=null;
        ResultSet resnp=null;
        ResultSet test2=null;
        int index=0; 
            JSONObject json =new JSONObject();
            List<String> categorys =new ArrayList<String>();
            List<Double> lastMonthData=new ArrayList<Double>();
            List<Double> thisMonthData=new ArrayList<Double>();
            String sql="select lastmonth,thismonth,period from card" ;
            res = statement.executeQuery(sql);
            while(res.next())
         {
          categorys.add(res.getString("period"));
          lastMonthData.add(res.getDouble("lastmonth"));
          thisMonthData.add(res.getDouble("thismonth"));
  
         }
            json.put("categorys",categorys);
         json.put("lastMonth",lastMonthData);
         json.put("thisMonth",thisMonthData);
         out.print(json);

运行结果:{"categorys":["period","one","two","three"],"thisMonth":[13,20,9,17],"lastMonth":[16,10,14,8]}

Newfile.js的程序

</head>
<script type="text/javascript"> 
$(function () {
    var chartLine = new Highcharts.Chart({
        chart: {
            type: 'line',
            renderTo: 'container',
        },
        title: {
            text: 'result'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'yuan'
            }
        },
        tooltip: {
            enabled: false,
            formatter: function () {
                return '<b>' + this.series.name + '</b><br>' + this.x + ': ' + this.y + '°C';
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'last',
            data: []
        }, {
            name: 'now',
            data: []
        }]
    });
 
    function getFormLine() {
        return $.getJSON("test.jsp",  function(data) {
        <strong><span style="color:#ff0000;">chartLine.series[0].setData(response.data.lastMonth);
            chartLine.series[1].setData(response.data.thisMonth);
            chartLine.xAxis[0].setCategories(eval(response.data.categorys));</span></strong>
        }).error(function (response) {
            $log.debug(".....");
        });
 
    }
 
    getFormLine();
});
        </script>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

加载中
0
sky_m
sky_m

没有图形,感觉是数据没有传输进来

0
简数科技
简数科技

Highcharts有在线实例,可能直接在线生成,点运行,马上就能生成图表

这个平台上回答Highcharts问题较少,建议直接在Highcharts中文官网论坛上提问哦

1、Highcharts 中文官网:https://www.hcharts.cn/

2、Highcharts 中文学习教程:https://www.hcharts.cn/docs

3、Highcharts 中文论坛:https://bbs.hcharts.cn/forum.php

返回顶部
顶部