【问题标题】: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 行......

标签: javascript json ajax highcharts ajaxform


【解决方案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...

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

【讨论】:

    猜你喜欢
    • 2023-01-12
    • 2014-06-28
    • 1970-01-01
    • 2022-12-14
    • 1970-01-01
    • 2014-05-13
    • 2017-08-21
    • 2011-03-14
    • 2018-10-22
    相关资源
    最近更新 更多