一个图表,多个系列多个数据,包含单个数据

时间:2018-06-18 15:40:25

标签: javascript json ajax highcharts ajaxform

我试图搜索我的问题,但我找不到任何解决方案。

我正在尝试生成一个包含单个数据输入的图表,我需要对该数据进行过滤,因此我可以显示多个系列和多个数据。

我找到了一个例子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();
        }
    }

我期待这个

I am expecting this...

这是显示为整个数据

This is the display as a whole data

这是我得到数据时的结果:netjsonset.data

This is what i get when i have data: netjsonset.data,

1 个答案:

答案 0 :(得分:0)

所以,我终于弄对了。

这就是我在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...

如果任何人可以给我一个更好/更干净的代码..请与我分享..万分感谢。