如何在 AJAX + Spring MVC 中使用 Highcharts答案

【问题标题】：How to use High Charts with AJAX + SpringMVC如何在 AJAX + Spring MVC 中使用 Highcharts
【发布时间】：2014-12-17 04:18:20
【问题描述】：

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

【问题讨论】：

标签： jquery ajax spring-mvc charts highcharts

【解决方案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);
        }
    });
});

【讨论】：