根据服务器的响应更改高图表值

时间:2013-03-08 11:53:30

标签: ajax json apache highcharts

这是我的HTML代码

 <select id="difques">
            <option value="firstfivemonth">firstfivemonth</option>
            <option value="nextfivemonth">nextfivemonth</option>
        </select>

这是我在jquery中使用ajax调用服务器的代码........

 $('#difques').change(function(){
                     $.ajax({
                                type: "GET",
                                url: "ManyQuestionGraph",
                                data: "graphfor="+$('#difques :selected').val()+"&value="+${value},
                                success: function(data){
                                    var obj=jQuery.parseJSON(data);
                                    options.series[0].color='red';
                                    options.xAxis.categories=obj.value;
                                    options.series[0].data=obj.month;
                                    chart = new Highcharts.Chart(options);
                                }  
                            });
                        });

我的高清代码是

               var chart;
                    $(document).ready(function() {
                       var options  = {
                            chart: {
                                renderTo: 'graphreport',
                                type: 'column'
                            },
                            title: {
                                text: 'Rating'
                            },
                            xAxis: {
                                categories: ['jan','feb','mar','apr','may']
                            },
                            yAxis: {
                                min: 0,
                                max: 5,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function() {
                                    return ''+
                                        this.series.name +': '+ this.y +'';
                                }
                            },
                            credits: {
                                enabled: false
                            },
                            series: [{
                                name: 'Rating',
                                data: [1,2,3,4,5],
                                color: '#77c4d3'
                            }]
                        }
                        chart = new Highcharts.Chart(options);

我的servlet代码是

 protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
                    JSONObject jsonobject = new JSONObject();
                    jsonobject.put("value",[5,4,3,2,1]);
                    jsonobject.put("month",['jun','jul','aug','sep','oct']);
                    response.setContentType("text/plain");
                    response.setCharacterEncoding("UTF-8");
                    response.getWriter().write(jsonobject.toString()); 
}

我的网页看起来像这样...... enter image description here

但是当我在select组合框中选择接下来的五个月时,它使用ajax调用服务器,我可以在ajax成功时从服务器获取json数据,但是当我将数据传递给highchart时,它看起来像这样...... ....

enter image description here

我做错了还是我在编码方面犯了一些错误......

帮助我............

2 个答案:

答案 0 :(得分:0)

这一点对我来说不对:

options.xAxis.categories=obj.value;
options.series[0].data=obj.month;

这不是错误的方式吗?几个月是类别,价值是数据?尝试:

options.xAxis.categories=obj.month;
options.series[0].data=obj.rate;

答案 1 :(得分:0)

你的JSON对于Highcharts是错误的,改为:

{
     "rate":",3.5,0,0,0",
     "month":"'jun','jul','aug','sep','oct'"
}

对于这样的事情:

{
     "rate": [3.5,0,0,0],
     "month": ['jun','jul','aug','sep','oct']
}