来自json的Highcharts多个系列答案

【问题标题】：Highcharts multiple series from json来自json的Highcharts多个系列
【发布时间】：2013-03-19 16:19:18
【问题描述】：

我的 JSON 看起来像： [[[773,1363709520],[774,1363709580]],[[1546,1363709520],[1548,1363709580]]]

我希望 highcharts 在每次到达新的 JSON 数组时创建一个新系列：[[1546,1363709520],[1548,1363709580]]

我有一个硬编码版本，但是让我的数据[[]] 没有帮助...

$(function () {

var data = [];
var data1 = [];
$.ajax({
    url: "http://localhost:8080/vdm-stats-core/stats/metrics?from=2&src=org.example.fib&customer=customer0&server=server0&metric=responses.count",
    dataType: "jsonp", // Notice! JSONP <-- P (lowercase)
    jsonp: "callback",
    success: function (inData) {
        console.log(inData[0][1][0]);
        var xval = new Date();
        for (a = 0; a < inData.length; a++) {
            for (i = 0; i < inData[a].length; i++) {
                var yval = inData[a][i][0];
                xval = inData[a][i][1];
                var x = [xval, yval];
                if (a == 0) {
                    data.push(x);
                }
                if (a > 0) {
                    data1.push(x);
                }
            }
        }
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            title: {
                text: 'Test',
            },

            rangeSelector: {
                selected: 1
            },

            xAxis: {
                type: 'datetime'
            },

            series: [{
                name: 'Customer0',
                data: data
            }, {
                name: 'Customer1',
                data: data1
            }]
        });
    },
    error: function () {
        console.log(arguments);
    }
});

});

请帮忙！

【问题讨论】：

标签： ajax json highcharts series

【解决方案1】：

我试图理解你的代码，这是我的解释；

function success(inData) {

   var customerNr,
       timestamp,
       VALUE = 0,
       TIMESTAMP = 1,
       series = {},
       len = inData.length,
       yval,
       item;

        for (customerNr = 0; customerNr < len; customerNr++) {
            // Init series object literal for customer
            series[customerNr] = {
                name : 'Customer '+customerNr.toString(),
                data : []
            };
            // Setup data for customer
            for (item = 0; item < inData[customerNr].length; item++) {
                yval = inData[customerNr][item][VALUE];
                timestamp = inData[customerNr][item][TIMESTAMP];
                series[customerNr].data.push([timestamp,yval]);
            }
            // Add series, but redraw only on last customer
            chart.addSeries(series[customerNr],customerNr===len-1);

        }

};

您为每个客户回收系列对象，但我添加了一个 customerNr 属性。 Highchart 中的 addSeries 方法默认会重绘图表 (http://api.highcharts.com/highcharts#Chart.addSeries())。我选择只重绘最后一位客户的图表。分叉的小提琴示例； http://jsfiddle.net/hkskoglund/VVLNV/

【讨论】：

非常感谢 :) 如果我有足够的声誉，我会投票赞成。

【解决方案2】：

要记住的重要一点是，series 对象已经是一个 json 对象... 因此，最简单的做法是，假设您控制 json 文件的创建，将 json 输出格式化为整个系列对象：

[{ name: 'Customer0', data: [[773,1363709520],[774,1363709580]] }, { name: 'Customer1', data: [[1546,1363709520],[1548,1363709580]] }]

然后：

series: myData

【讨论】：

这只是 JSON 格式。 JSON 创建不受控制。 json 中可能有 4 个数组，其中需要 4 个系列。

【解决方案3】：

我让它工作：不得不重置我的系列数据。

$(function () {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            title: {
                text: 'Test',
            },

            rangeSelector: {
                selected: 1
            },
            xAxis: {
                type: 'datetime'
            },

            series: []
        });

$.ajax({
    url: "http://localhost:8080/vdm-stats-core/stats/metrics?from=200&src=org.example.fib&customer=customer0&server=server0&metric=responses.count",
    dataType: "jsonp", // Notice! JSONP <-- P (lowercase)
    jsonp: "callback",
    success: function (inData) {
        var xval = new Date();
        var series = {
            name: 'Customer',
            data: []
        }
        for (a = 0; a < inData.length; a++) {
            for (i = 0; i < inData[a].length; i++) {
                var yval = inData[a][i][0];
                xval = inData[a][i][1];
                var x = [xval, yval];
                 series.data.push(x);
            }
            chart.addSeries(series);
            series.data = [];
        }
    },
    error: function () {
        console.log(arguments);
    }
});

});

【讨论】：