javascript - 基于 clientId 值在同一页面上的多个 Highcharts ？

Question

大家好，我使用 rest api json 绘制了一张 highstock 图表，一切正常。
但现在我想要多个图表(基于 clientId)。我用 (cpu_usage, timestamp 和 将数组推到循环外>clientID).那么有没有人知道如何根据 clientID 动态创建更多的 highcharts？

例子:
如果我有 3 个 clientID，我需要 3 个图表及其 cpu_usage 和 timestamp。

REST 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。您可以制作一个数组，每个客户端都有自己的上一个 map 数据。然后你可以像这样附加图表

_.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