基于clientId值的同一页面上的多个高级图表？

Question

大家好，我画了一张高档图表，消耗了休息api json，一切正常。 但现在我想拥有多个图表（基于clientId）。我用（cpu_usage，timestamp和clientID）推送数组外部循环。那么有谁知道如何基于clientID动态创建更多的高级图表？

例： 如果我有3个clientID我需要3个高图与他们的cpu_usage和timestamp。

休息api JSON：http://5ea073ff.ngrok.io/api/clients

结果：

<div id="container"></div>
 <script type="text/javascript">

$.getJSON( "http://localhost:8000/api/devices", function( res) {


    var result= [];
    var clientNames = new Array();
    console.log(result);

  $.each( res, function(i) {
        var deviceNames=data[i].clientAllias;
        var clientId=data[i].clientId;
        clientNames.push(deviceNames);          
    $.each( data[i].clientData, function(a) {
        $.each( data[i].clientData[a], function(key, val) {
            clientId2=data[i].clientData[a].clientId
            var cpu=data[i].clientData[a].cpuUsage;
            var time_usages=data[i].clientData[a].timestamp;
            infos=[];
            infos.push(time_usages, cpu, clientId2);
            result.push(infos);

  });
  });
     });

    result.sort();

$(document).ready(function(){
        var dataObject = {
            marker: {
        states: {
            enabled: true,
        }
    },
        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: 'Sec'
            }, {
                count: 1,
                type: 'hour',
                text: 'Min'
            }, 
            {
                count: 1,
                type: 'day',
                text: 'Hours'
            },

            {
                type: 'all',
                text: 'All'

            }],
            title:'hours',
            inputEnabled: true,
            _selected: 1
        },


            title: {
                text: clientNames,
            },
          xAxis: {

    title: {
        enabled: true,
        text: 'CPU USAGE'
    },
    type: 'datetime',
            dateTimeLabelFormats: {
               second: '%H:%M:%S',
               minute: '%H:%M',
               hour: '%H:%M',
               day: '%e. %b',
               week: '%e. %b',


            },


},
plotOptions: {
        series: {
            marker: {
                enabled: true,
                radius: 3,
                fillColor: '#007ab3',
            }
        }
    },

            series: [{
    name:"CPU USAGE",
   data: result,
    }],

            chart: {
                renderTo: 'container'
            }

        };

         var chart = new Highcharts.StockChart(dataObject);   
        //var chart = $('#container').highcharts('StockChart', dataObject);



    });
   });




</script>

Answer 1

您需要通过clientId映射数据。然后可以映射每个clientId以及cpuUsage，timeStamp，clientId。您可以创建一个数组，每个客户端都有自己的数据来自上一个地图。然后你可以像这样追加图表

_.forEach(clients, function(client) {
$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        marker: {
            states: {
                enabled: true
            }
        },
        rangeSelector: {
            buttons: [{
                    count: 1,
                    type: "minute",
                    text: "Sec"
                },
                {
                    count: 1,
                    type: "hour",
                    text: "Min"
                },
                {
                    count: 1,
                    type: "day",
                    text: "Hours"
                },

                {
                    type: "all",
                    text: "All"
                }
            ],
            title: "hours",
            inputEnabled: true,
            _selected: 1
        },

        title: {
            text: client.name
        },
        xAxis: {
            title: {
                enabled: true,
                text: "CPU USAGE"
            },
            type: "datetime",
            dateTimeLabelFormats: {
                second: "%H:%M:%S",
                minute: "%H:%M",
                hour: "%H:%M",
                day: "%e. %b",
                week: "%e. %b",
                day: "%Y<br/>%b-%d"
            }
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    radius: 3,
                    fillColor: "#007ab3"
                }
            }
        },

        series: [{
            name: "CPU USAGE",
            data: client.data.sort()
        }],

        chart: {
            renderTo: "container" + name
        }
    });

})

我使用lodash作为映射数据的助手，但你可以使用你想要的任何东西。我发现解析数据要容易得多。

var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId"); <-- ALL UNIQUE CLIENTS
var clients = [];
_.forEach(mappedClients, function(clientId) {
    var tempClient = {
        name: clientId,
        data: []
    };
    _.forEach(data, function(tempData) { <--- MAPPING THROUGH ALL DATA TO FIND A MATCH FOR EACH UNIQUE CLIENT 
        if (clientId === tempData.clientId) {
            _.forEach(tempData.clientData, function(clientData) { <-- THEN MAP CLIENTDATA ARRAY OF THE CLIENT TO KEEP THE DATA THAT WE WANT
                tempClient.data.push(
                    [clientData.cpuUsage, clientData.timestamp, clientId]
                );
            })
        }
    });
    clients.push(tempClient);
});

根据您的信息Jsfiddle检查一个有效的jsfiddle示例