javascript - 如何使用 json 数组映射序列和数据点

Question

我正在使用 highchart 创建多串行折线图。

我的 Json (cleanData) 看起来像这样......

[{
    "key": "port_A",
    "value": [
        [1447596900000, 0],
        [1447596960000, 0],
        [1447597020000, 1]
    ]
}, {
    "key": "port_B",
    "value": [
        [1447596900000, 0],
        [1447596960000, 4]
    ]
} {
    "key": "port_C",
    "value": [
        [1447596900000, 0],
        [1447596960000, 0],
        [1447597020000, 1]
    }]

如何将“键”映射为序列，将“值”映射为 highchart 上的数据点

$(document).ready(function () {

    Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'pie',
            zoomType: 'y',
            resetZoomButton: {
                position: {
                    // align: 'right', // by default
                    // verticalAlign: 'top', // by default
                    x: 0,
                    y: -30
                }
            },
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50
            }
        },

        title: {
            text: 'Users by region',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },

        xAxis: {
            type: 'category',
            //categories: ['APAC', 'test2', 'test3', 'test4'],
            labels: {
                rotation: -45,
                style: {
                    'fontSize': '10px',
                        'fontFamily': 'Verdana, sans-serif',
                        'color': '#333',
                        'text-transform': 'uppercase',
                        'font-weight': '600'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of users '
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '#users: <b>{point.y:.1f}</b>'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: []

    });


    var cleanData1 = JSON.stringify(myArray);
    var cleanData = $.parseJSON(cleanData1);
    console.log(JSON.stringify(cleanData));
    chart.series = cleanData;

});

Answer 1

您需要迭代 json 并将名称和数据放入对象中，如下所示

 var seriesData = [];
 $.each(clearData, function(i,item){
 seriesData.push({name:clearData[i].key,data:clearData[i].value});
  console.log("seriesData"+JSON.stringify(seriesData));
 }); 

See working fiddle here