X-man

导航

客户端 

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<body>
    <!--      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
      <script type="text/javascript" src="../js/highcharts.js"></script>-->
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
    var json;
        $(function() {
            $('#show-button').on('click', function(e) {
                showChart();
            });
        });

        var chart;
        function showChart() {
            $.ajax({
                url : "servlet/Charts",
                type : "POST",
                dataType : "json",
                data : {
                    "que" : $("#inputque").val()
                },
                success : function(data) {
                    json = eval(data);
                    if (json != "" && json != null) {
                        chart = new Highcharts.Chart({
                            chart : {
                                renderTo : 'container',
                                type : 'line'
                            },
                            title : {
                                text : '话题趋势分析'
                            },
                            subtitle : {
                                text : ''
                            },
                            xAxis : {

                                categories : json.categories,
                                id : 'temperature-axis'
                            },
                            yAxis : {
                                title : {
                                    text : '百分比 (%)'
                                },
                                min : 0
                            },
                            plotOptions : {
                                line : {
                                    dataLabels : {
                                        enabled : true
                                    },
                                    enableMouseTracking : true
                                }
                            },
                            tooltip : {
                                formatter : function() {
                                    return '<b>' + this.series.name + '出现在'
                                            + '</b><br/>' + this.x + ': '
                                            + this.y + ' 次';
                                }
                            },
                            series : json.series

                        });
                    }
                    $("#text").val(json.aaf); 
                    
                },
                error : function() {
                    alert('error!');
                }
            });
        }

        //document.getElementByIdx_x("text").value = json.aaf;
        //document.getElementById("text").InnerText = "xxx"; 

    </script>


    <div style="margin:auto;text-align:center;">
        <div style="padding:10px;">
            <input type="text" name="que" id="inputque"> <input
                type="button" id="show-button" value=" Test Highcharts " />
        </div>


        <div id="container"
            style="height:480px;width:980px;background-color:#efefef;"></div>
        <textarea name="yj" rows="5" cols="20" wrap="hard" id = "text">
        </textarea>
        <a href="<%=request.getContextPath()%>/show.jsp"><input type="button"></input></a>
        
    </div>
    
    

    
</body>
</html>

 

posted on 2015-05-27 21:56  雨钝风轻  阅读(334)  评论(0)    收藏  举报