ajax - 使用 Ajax 将数据加载到 Highcharts

标签 ajax json highcharts

我正在尝试使用 JQUERY AJAX 调用更新页面加载和选择菜单更改时的 Highcharts 。有数据以 [[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)
而且我认为您必须使用 JSON.parse(data) 将 Ajax 结果从字符串转换为真实的对象/数组。 .

编辑:
@Ricardo Lohmann:在 ajax 调用中,他没有在响应中指定他期望的数据类型,因此 jQuery 会猜测数据类型。但它不会识别以 [ 开头的字符串作为 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 - 使用 Ajax 将数据加载到 Highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12223972/

相关文章:

javascript - AJAX 响应需要转换为 blob

python - 如何使用 Ajax 检查 django-celery 任务的状态和结果?

php - 动态内容选择不起作用

javascript - 如何在highchart中的气泡之间添加直线

javascript - 在事件处理程序中访问 React JS 中当前组件的属性和状态

javascript - 如何更改饼图 Highcharts 中的字体属性?

javascript - 为什么 JSON 结果可以是 bool 值而不是对象或数组?

javascript - 如何只获取 JSON 数据的第一个元素?

java - 检查 JSON 节点是否为 null

javascript - 如何在下拉列表中设置默认值 javascript