如何将High Charts与AJAX + SpringMVC一起使用

Question

我在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();
                            }
                        }
                    });
}

Answer 1

试试这个：

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);
        }
    });
});