在highcharts组合图中传递Ajax数据

Pass Ajax data in highcharts Combination chart

本文关键字：Ajax 数据 highcharts 组合图更新时间：2023-09-26

我试图在组合图中传递数据（行数据和pie_data）。我可以传递pie_data，但无法传递行数据。这是我的jsFiddle链接

请告诉我哪里出了问题？

这是我的密码。

$(function () {
    var line_data = [{ // this is AJAX returned line_data.
    'data': [
        [1383741000000, 1608.3000000000002],
        [1383741900000, 1611.9999999999973],
        [1383742800000, 1612.299999999997]
    ],
        'name': 'Bangalore'
}, {
    'data': [
        [1383741000000, 54.2],
        [1383741900000, 54.300000000000004],
        [1383742800000, 54.300000000000004]
    ],
        'name': 'New Delhi'
}];
// this is AJAX returned pie_data. 
// I'm able to get the pie chart, but not the line chart.
var pie_data = [['Jane',13], ['Jnanae',33] , ['Jasvdwdne',113]];
        $('#container').highcharts({
            chart: {
            },
            title: {
                text: 'Combination chart'
            },
            xAxis: {
                type: 'datetime'
            },
            series: [{
                type: 'spline',
                name: 'Average',
                data: line_data,
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }, {
                type: 'pie',
                name: 'Total consumption',
                data: pie_data,
                center: [100, 80],
                size: 100,
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }]
        });
    });

试试这个：-http://jsfiddle.net/5yzb2/6/

JS：-

$(function () {
    var seriesOptions = [];
    var line_data = [{ // this is AJAX returned line_data.
        data: [
            [1383741000000, 1608.3000000000002],
            [1383741900000, 1611.9999999999973],
            [1383742800000, 1612.299999999997]
        ],
        name: 'Bangalore'
    }, {
        data: [
            [1383741000000, 54.2],
            [1383741900000, 54.300000000000004],
            [1383742800000, 54.300000000000004]
        ],
        name: 'New Delhi'
    }];

    // this is AJAX returned pie_data. 
    // I'm able to get the pie chart, but not the line chart.
    var pie_data = [
        ['Jane', 13],
        ['Jnanae', 33],
        ['Jasvdwdne', 113]
    ];
    //Adding all data seriesOptions
    $.each(line_data, function (i, name) {
        seriesOptions[i] = {
            type: 'spline',
            name: this.name,
            data: this.data
        };
    });
    seriesOptions[seriesOptions.length] = {
        type: 'pie',
        name: 'Total consumption',
        data: pie_data,
        center: [100, 80],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    };
    $('#container').highcharts({
        chart: {},
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            type: 'datetime'
        },
        tooltip: {
            formatter: function () {
                var s;
                if (this.point.name) { // the pie chart
                    s = '' + this.point.name + ': ' + this.y + ' fruits';
                } else {
                    s = '' + this.x + ': ' + this.y;
                }
                return s;
            }
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        },
        series: seriesOptions
    });
});