一张图表，多系列多数据单数据

Posted 2023-02-21

【中文标题】一张图表，多系列多数据单数据

【英文标题】：one chart, multiple series multiple data with single data

【发布时间】：2018-11-27 12:16:23

【问题描述】：

我尝试搜索我的问题，但没有找到任何解决方案。

我正在尝试生成带有单个数据输入的图表，并且从该单个数据条目中，我需要过滤数据，因此我可以有多个系列和多个数据显示。

我找到了一个例子https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/compare/

这个例子可以帮助我处理系列部分，但数据是按系列名称呈现的。

目前我必须在函数中使用 AJAX 调用来执行所有操作...所以，这就是我写的...

            var seriesOptions = [],
            seriesCounter = 0,
            namesCounter = 0,
            names = [],//ALLPrimDealer.names;
            newjsonset = ;

$.ajax(
        url: fullUri,
        type: 'POST',
        data: JSON.stringify(requestData),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) 

            //$("#displayItems").show();

            ///////////// PUT CALLS TO CHARTS HERE /////////////////////////
            for (i = 0; i < data.ALLPrimDealer["0"].name.length; i++) 
                if (names.indexOf(data.ALLPrimDealer["0"].name[i].CusipId) === -1)                     
                    names.push(data.ALLPrimDealer["0"].name[i].CusipId);
                    namesCounter++;
                
            ;

            $.each(names, function (i, name) 
                newjsonset = JSON.parse(JSON.stringify(data.ALLPrimDealer));
                for (var x = 0; x < data.ALLPrimDealer["0"].name.length; x++) 

                    var ee = data.ALLPrimDealer["0"]['name'][x];
                    var e = data.ALLPrimDealer["0"].name[x].CusipId;
                    if (e != name) 
                     delete newjsonset["0"].name[x];
                        delete newjsonset["0"].data[x];
                    

                
                seriesOptions[i] =                     
                    name: name,
                    data: data.ALLPrimDealer["0"].data,

                // As we're loading the data asynchronously, we don't know what order it will arrive. So
                // we keep a counter and create the chart when all the data is loaded.
                seriesCounter += 1;

                if (seriesCounter === names.length) 
                    highChartSample();
                

            );


            //// we're done so stop the spinner
            stopSpinner();
        ,
        error: function () 
            showErrorMsg('Error getting data');
            stopSpinner();
        
    

我期待这个

这是显示的整体数据

这是我有数据时得到的：netjsonset.data

【问题讨论】：

你得到的结果和你想要的结果有什么区别？

@zfrisch 所以，从一个一次性数据中，我按名称过滤数据。对于该数据集中的每个名称，它应该有 3 个名称，从第一个名称开始，它应该有大约 172 个数据，然后是 100 个，然后是 72 个......它应该在我的一个图表中有 3 行......

【参考方案1】：

所以，我终于做对了..

这就是我在 ajax 调用中所做的......

var seriesOptions = [],
            seriesCounter = 0,
            namesCounter = 0,
            names = [],//ALLPrimDealer.names;
            newjsonset = ;
$.ajax(
        url: fullUri,
        type: 'POST',
        data: JSON.stringify(requestData),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) 
        //$("#displayItems").show();

        ///////////// PUT CALLS TO CHARTS HERE /////////////////////////
        //runDPCumChart(data.ALLPrimDealer);
        //runChart1(data.ALLPrimDealer);            
        //newjsonset = data.ALLPrimDealer;
        for (i = 0; i < data.ALLPrimDealer["0"].name.length; i++) 
            if (names.indexOf(data.ALLPrimDealer["0"].name[i].CusipId) === -1)                     
                names.push(data.ALLPrimDealer["0"].name[i].CusipId);
                namesCounter++;
            
        ;            

        $.each(names, function (i, name) 

            newjsonset = JSON.parse(JSON.stringify(data.ALLPrimDealer));
            var datalength = 0;
            var newlengendindx = newjsonset[0].legendIndex;
            for (var x = 0; x < data.ALLPrimDealer["0"].name.length; x++)                     

                var e = data.ALLPrimDealer["0"].name[x].CusipId;                    
                if (e != name)                         
                    delete newjsonset["0"].data[x];
                    datalength += 1;                        
                    newjsonset["0"].legendIndex--;
                    newjsonset = JSON.parse(JSON.stringify(newjsonset));

                
                var count = Object.keys(newjsonset["0"].name).length;
                newjsonset["0"].data.length = count;
                newjsonset["0"].name.length = count;                    
            
            seriesOptions[i] =                     
                name: name,
                data: newjsonset[0].data
            ;

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) 
                highChartSample();
                testChart(name, newjsonset[0].data);
            

        );


        //// we're done so stop the spinner
        stopSpinner();
    ,
    error: function () 
        showErrorMsg('Error getting data');
        stopSpinner();
    
);

what it should look like.. with my updated ajax call...

如果你们中的任何人可以给我一个更好/更清洁的代码..请与我分享..非常感谢。