使用Ajax将数据加载到Highcharts中

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试通过JQUERY

AJAX调用来更新页面加载和选择菜单更改时的高图表。有以[[10,1228800000]，[10,1228800000]]格式返回的数据。图表为空白，不对任何数据进行图形处理。

尝试了此处发布的几种解决方案，但没有一个有效。

var chart;
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'stats',
                    defaultSeriesType: 'spline'
                },
                title: {text:''},
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {},
                series: []
            };
    var month = 'July';
    $.ajax({
        type: "POST",
        data: "month="+month,
        url: "update_visits_chart",
        success: function (data) {
            options.series.push(data);
            chart = new Highcharts.Chart(options);
        }
    });

有什么错误吗？提前致谢。编辑：

最新的代码仍然无法正常工作：

var options = {
            chart: {
                renderTo: 'stats',
                type: 'spline'
            },
            title: {
                text: ''
            },
            xAxis: {
                type:'datetime',
                tickInterval: 30 * 24 * 3600 * 1000,
                dateTimeLabelFormats: {
                    day: '%b %e'
                },
                labels: {
                    rotation: -45,
                    align: 'right'
                }
            },
            yAxis: {
                title: {
                    text: 'Number of visits'
                },
                min: 0
            },
            tooltip: {
                formatter: function() {
                        return Highcharts.dateFormat('%b %e', this.x) +'<br />'+this.y+' visit(s)';
                }
            },
            legend: {
                enabled: true
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Number of Visits',
                data: []
            }]
        };
        var month = 'July';
        $.ajax({
            type: "POST",
            url: "update_visits_chart",
            data: "month="+month,
            success: function(data){
                options.series[0].data = data;
                chart = new Highcharts.Chart(options);
            }
        });

回答：

您必须使用文档中描述的系列对象的setData方法。你的情况是options.series[0].setData(Data)

而且我认为您必须使用将Ajax结果从字符串转换为真实的对象/数组JSON.parse(data)。

@Ricardo

Lohmann：在ajax调用中，他没有指定他期望在响应中使用的dataType，因此jQuery将猜测dataType。但是它无法识别[以JSON

开头的字符串，因此我怀疑他的响应是否将使用正确的mime类型提供服务application/json。因此，指定正确的mime类型也应该可以解决该问题。但我没有发问者完整的ajax响应的示例。所以我也只是猜测。

我建议以下ajax调用：

$.ajax({
    type: "POST",
    url: "update_visits_chart",
    data: {month: month},
    dataType: 'json',
    success: function(data){
        options.series[0].setData(data);
    }
});

@Jugal Thakkar

$.getJSON 只是上述ajax调用的快捷方式，但灵活性较差，因为您的选择较少。

以上是 使用Ajax将数据加载到Highcharts中 的全部内容， 来源链接： utcz.com/qa/419924.html

回到顶部