Построение комбинированной диаграммы с помощью Highcharts

#json #highcharts

#json #верхние диаграммы

Вопрос:

Я создаю комбинированную диаграмму из объекта 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:

 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);

},
  

Этот цикл никогда не добавляет второй ряд, вы получаете только последний в цикле, потому что он завершает запись предыдущего.

Мои изменения могут решить проблему, но в данный момент меня нет рядом с компьютером, чтобы проверить.