使用Highcharts构建组合图表

时间:2011-06-06 08:31:51

标签: json highcharts

我正在构建一个由'spline'和'pie'组成的ajax json对象的组合图。

我遇到的问题只是饼图呈现,就像饼图覆盖了样条线一样。如果我删除饼图,样条曲线可以正确渲染。

这是我的代码。

$(document).ready(function () {
var options = {
    chart: {
        renderTo: 'container'
    },
    title: {
        text: 'The Planning Process'
    },
    xAxis: {
        title: {
            text: 'Time'
        },
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Turn Over'
        }
    },
    plotOptions: {
        series: {}
    },
    series: []
};

$.ajax({
    type: "POST",
    dataType: "json",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    url: "_services/ScriptService.asmx/getData",
    success: function (items) {

        var obj = jsonParse(items.d);
        var series = { data: [] };

        $.each(obj, function (itemNo, item) {
            if (itemNo == 0) {
                series.data = item.data;
                series.name = item.name;
                series.type = item.type;
            } else if (itemNo == 1) {
                series.type = item.type;
                series.data = item.data;
           series.name = item.name;
                series.center = item.center;
                series.size = item.size;
                series.showInLegend = item.showInLegend;
            }
        });

        options.series.push(series);

        chart = new Highcharts.Chart(options);
        console.log(options);

    },
    cache: false,
    error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }
});  
});

我的json;

[{
    "name": "Projection",
    "type": "spline",
    "data": [
        [
            634420512000000000,
            100000
        ],
        [
            634421376000000000,
            100086
        ],
        [
            634422240000000000,
            100171
        ],
        [
            634423104000000000,
            100257
        ]
    ]
},
{
    "name": "Where you where",
    "type": "pie",
    "center": [
        100,
        80
    ],
    "size": 100,
    "showInLegend": false,
    "data": [
        {
            "name": "Client Based Adviser Charged As Percent",
            "color": "#4572A7",
            "y": 8
        },
        {
            "name": "Provider Commission Based As Percent",
            "color": "#AA4643",
            "y": 92
        }
    ]
}]

有人能指出我哪里出错吗?

1 个答案:

答案 0 :(得分:2)

success: function (items) {

    var obj = jsonParse(items.d);

    $.each(obj, function (itemNo, item) {
        series = new Array();
        if (itemNo == 0) {
            series.data = item.data;
            series.name = item.name;
            series.type = item.type;
        } else if (itemNo == 1) {
            series.type = item.type;
            series.data = item.data;
            series.name = item.name;
            series.center = item.center;
            series.size = item.size;
            series.showInLegend = item.showInLegend;
        }
        options.series.push(series);
    });

    chart = new Highcharts.Chart(options);
    console.log(options);

},

这个循环从不添加第二个系列,你只是在循环中获得最后一个系列,因为它之前已经过了一个。

我的更改可能会解决问题,我现在不在电脑附近检查。