如何在AJAX + Spring MVC中使用Highcharts

时间:2014-12-17 04:18:21

标签: jquery ajax spring-mvc charts highcharts

我在SpringMVC项目中开发了一些包含一些图表的仪表板。我使用HighCharts来开发图表。
基本上我检查了他们的文档以使用 AJAX + SpringMVC 创建此图表,但我无法做到。所以基本上我已经获得带有ajax请求的数据并在jsp中创建隐藏表并从该表中检索数据并生成图表。但我想知道如何通过AJAX请求直接进行数据检索。

这是我目前的代码

function chartGeneration(chart_source){
    $('#chart-space').html("");
    var chartsource = chart_source;
    $('#chart-space').highcharts(
                    {
                        data : {
                            table : document.getElementById(chartsource)
                        },
                        chart : {
                            type : 'pie'
                        },
                        title : {
                            text : ''
                        },
                        yAxis : {
                            allowDecimals : false,
                            title : {
                                text : 'Transactions'
                            }
                        },
                        tooltip : {
                            formatter : function() {
                                return '<b>' + this.series.name
                                        + '</b><br/>' + this.point.y + ' '
                                        + this.point.name.toLowerCase();
                            }
                        }
                    });
}

1 个答案:

答案 0 :(得分:0)

试试这个:

function chartGeneration(chart_source) {
    $('#chart-space').html("");
    var chartsource = chart_source;
    $('#chart-space').highcharts({
        series: chart_source,
        chart: {
            type: 'pie'
        },
        title: {
            text: ''
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Transactions'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });
}


$(document).ready(function() {
    $.ajax({
        url: 'AJAXURL',
        type: 'GET',
        async: true,
        dataType: "json",
        success: function(data) {
            chartGeneration(data);
        }
    });
});