Highcharts重复显示相同的数据

时间:2012-05-18 05:33:04

标签: javascript csv highcharts

我以为我要求参与其中,我正在尝试编写一个highcharts javascript文件来显示我的一些数据。我已经能够显示正确数量的数据集,并在正确的图表上(它们进入时间或过程图)但我有一个问题,所有的图表都使用相同的名称&数据,无论它们在哪个图表上。即使当我对它们被分配到对象数组的位置发出警报时,它们都是个体的。真的不确定发生了什么。

Obj是:

{
    name: SERIES_NAME,
    data: SERIES_DATA,
}

输出图,而不是如下数据:

图表数据:{Obj1,Obj2,Obj3 ... ObjN},显示多个单独的系列。

我有:

图表数据:{ObjN,ObjN,ObjN ... ObjN},

他们都只是ObjN。甚至跨越两个图表。所有数据/名称都相同。

此外,所有这些代码都是从php $(document).ready(function())

中调用的
function create_highchart(TIER,ARRAYS_STRING) {

        var chart;
        timestamp=document.getElementById("TIMESTAMP").value;
        var graph_dir = "graphs/capsim/"+timestamp+"/";

        var glue_outer = "___";
        var glue_inner = ":#:";
        var glue_csv="^";
        var i = 0;
        var j = 0;

        var tier_names=[];
        var WL_names = [];
        var CSV_data=[];
        var CSVs = [];
        var CSV_det=[];
        var out_arrays=[];

        var time_ids = ['queue','util','arrival','thruput'];

        out_arrays = ARRAYS_STRING.split(glue_outer);
        tier_names = out_arrays[0].split(glue_inner);
        WL_names = out_arrays[1].split(glue_inner);
        CSVs = out_arrays[2].split(glue_inner);
        CSV_det = out_arrays[3].split(glue_inner);
        WL_num = WL_names.length;
        tier_names.push('Overall System');
        tier_max = tier_names.length;
        curr_tier_name = tier_names[TIER];

        while(i<CSVs.length){
            CSV_data[i]=[];
            data = CSVs[i].split(glue_csv);
            CSV_data[i]=data;
            i=i+1;
        }

        i=0;
        var TMP_series = {
                name: '',
                data: [],
        }

        var TIME_SERIES_DATA=[];
        var PROC_SERIES_DATA=[];
        var time_count=0;
        var proc_count=0;

        var x = [];
        var y = [];
        var cat = [];
        var out2 = [];

        var options_time={
            chart: {
                renderTo: 'hc_div2',
                type: 'scatter',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Highcharts Demo for Graphing',
                x: -20 //center
            },
            subtitle: {
                text: 'Graph for '+curr_tier_name,
                x: -20
            },
            yAxis: {
                title: {
                    text: 'Performance Metrics'
                },
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        'X: '+this.x +' Y: '+ this.y

                }
            },
            plotOptions: {
                scatter: {
                    marker: {
                           radius: 2,
                    }              
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: 100,
                borderWidth: 0
            },
            series: TIME_SERIES_DATA
        };                

        var options_proc={
            chart: {
                renderTo: 'hc_div1',
                type: 'scatter',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Highcharts Demo for Graphing',
                x: -20 //center
            },
            subtitle: {
                text: 'Graph for '+curr_tier_name,
                x: -20
            },
            yAxis: {
                title: {
                    text: 'Performance Metrics'
                },
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    'X: '+this.x +' Y: '+ this.y
                }
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 2,
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: 100,
                borderWidth: 0
            },
            series: PROC_SERIES_DATA
        };

        var i=0;
        if(TIER==tier_max-1){
            TIER='OVR';
        };

        while(i<=CSV_det.length){
            csv = CSV_det[i+4];
            curr_data=CSV_data[(i/5)];
            csv_name = CSV_det[i+1];
            csv_tier = CSV_det[i+2];
            csv_wl = parseFloat(CSV_det[i+3])+1;

            wl_info = '';
            if(CSV_det[i+3] !='NA'){
                wl_info = ' Workload: '+csv_wl;
            };

            var j=0;
            var line = '';
            if(TIER==csv_tier){
                TMP_series.data = [];
                TMP_series.name = csv_name+wl_info;
                while(j<curr_data.length){
                    XY=curr_data[j].split(',');
                    X = parseFloat(XY[0]);
                    Y = parseFloat(XY[1]);
                    TMP_series.data.push([X,Y]);
                    j=j+1;
                }
                j=0;
                csv_type=csv.split('/')[3].split('_')[0];
                if($.inArray(csv_type,time_ids)==-1){
                    PROC_SERIES_DATA[proc_count]=[];
                    PROC_SERIES_DATA[proc_count]=TMP_series;
                    proc_count=proc_count+1;
                }else{
                    TIME_SERIES_DATA[time_count]=[];
                    TIME_SERIES_DATA[time_count]=TMP_series;
                    time_count=time_count+1;
                }
            }
            i=i+5;
        };
        var chart = new Highcharts.Chart(options_proc);
        var chart = new Highcharts.Chart(options_time);
    }

有关最新情况的快速解释:

  1. 最初将所有数据解析为数组字符串
  2. 中的相关容器
  3. 创建将要显示的两个高级图表
  4. 扫描CSV以查找相关的
  5. 对于那些,阅读他们的数据,并将其添加到TMP_series
  6. 读取所有数据后,将TMP_series添加到相关的图表数据系列
  7. 任何帮助都非常适合!

    由于

1 个答案:

答案 0 :(得分:0)

每次生成系列时,都需要将TMP_series重置为新对象。现在,您正在回收相同的对象,并将对同一对象的引用推送到系列数组中。修改代码的最后一位,如下所示:

       if(TIER==csv_tier){
            TMP_series = {
                 name : csv_name+wl_info,
                 data : []
            };
            while(j<curr_data.length){
                XY=curr_data[j].split(',');
                X = parseFloat(XY[0]);
                Y = parseFloat(XY[1]);
                TMP_series.data.push([X,Y]);
                j=j+1;
            }
            j=0;
            csv_type=csv.split('/')[3].split('_')[0];
            if($.inArray(csv_type,time_ids)==-1){
                PROC_SERIES_DATA[proc_count]=[];
                PROC_SERIES_DATA[proc_count]=TMP_series;
                proc_count=proc_count+1;
            }else{
                TIME_SERIES_DATA[time_count]=[];
                TIME_SERIES_DATA[time_count]=TMP_series;
                time_count=time_count+1;
            }
        }

注意如何在if的顶部,我创建一个具有指定属性的新对象,并将其分配给引用TMP_series。请记住,对象是通过引用传递的,因此当您将对象推入数组时,您将推送对象的引用,而不是对象的副本。