高图ajax请求


Highchart ajax requests

在网上搜索后,我终于决定问这个问题。

我目前使用PHPExcel访问xlsx数据,我也使用jQuery Highcharts;两者单独使用时都有效。我已经找到了几种使用不同XHR方法的高图的方法。我想知道的是,如果它是可能的与下面的代码。我可以得到结果,从PHP发送回来的JSON包含我可以在控制台中看到的10个对象。我的问题在于数据。输出将最后一个JSON对象插入到xAxis上的第一个槽中,并跳过前9

$(function () {                     
    var chart;
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'xy'
            },
            title: {
                text: 'Market Size & Trading Report'
            },
            subtitle: {
                text: 'Source: Some Source'
            },
            xAxis: [{
                categories: [],
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    formatter: function() {
                        return this.value +'m';
                    },
                    style: {
                        color: '#000'
                    }
                },
                title: {
                    text: 'Market Size',
                    style: {
                        color: '#000'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Percent',
                      style: {
                        color: '#4572A7'
                    }
                },
            labels: {
                formatter: function() {
                    return this.value +' %';
                },
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +
                    (this.series.name == 'Percent' ? ' %' : 'm');
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 200,
            verticalAlign: 'top',
            y: 50,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Market Size',
            color: '#4572A7',
            type: 'column',
            yAxis: 0,
            data: [6.7,7.0,6.8,6.6,6.4,6.8,6.5,6.3,6.3,6.4]
        }, {
            name: 'P Market Size',
            color: '#89A54E',
            type: 'spline',
            yAxis: 1,
            data: [9, 8.4, 8.3,8.1,8.6,8.8,8.7,8.4,8.9,8.6]
        },{
            name: 'D Market Size',
            color: '#FFCC00',
            type: 'spline',
            yAxis: 1,
            data: [1.7,1.7,1.8,1.8,2.0,1.8,1.7,1.7,1.7,1.71]
        }]
    });

    $.ajax({
                type: "GET",
                dataType: "json",
                url: 'http://devtest.localhost/screen-tests/excelReader/Tests/marketSizeandShareGraph.php',
                success: function (data) {
                var i;
                        $.each(data, function (k, v) {
                                chart1.xAxis[0].setCategories([v.heading]) ;
                        } );
                        }
                        } );
});

});

你有什么想法吗?

我认为你需要一次设置所有的类别。像这样:

var myCategories = [];
$.each(data, function (k, v) {
    myCategories.push(v.heading);
}
char1.xAxis[0].setCategories(myCategories);

每次调用setCategories都会导致图表被重新绘制,所以调用一次比较好。