2011-07-06 52 views
0

我创建了一个ajax驱动的flot折线图,我希望沿着一个flot饼图使用折线图中的总和数据表示。Jquery flot共同依赖线+饼图

数据线图可能是这个样子:

var datasets = { 
    "usa": { 
     label: "USA", 
     data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]] 
    },   
    "russia": { 
     label: "Russia", 
     data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]] 
    }, 
    etc... 
}; 

什么是最简单的方法总体来说,这种数据,因此,这将是适合的饼图插件?如果我将这个当前结果集提供给饼图,它将只考虑每个数据集的第一个值。

谢谢!

回答

0

我最终使用,对于每个图表的结果组合成在服务器侧的一个JSON响应,然后从而像被拉出来的客户机上的方法:

var datasets = { 
"usa-line": { 
    label: "USA", 
    data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]] 
}, 
"usa-pie": { 
    label: "USA", 
    data: [[1, TOTAL GOES HERE]]] 
},   
"russia-line": { 
    label: "Russia", 
    data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]] 
}, 
"russia-pie": { 
    label: "Russia", 
    data: [[1, TOTAL GOES HERE]]] 
} 
}; 

然后在回调为Ajax事件中,我将它们解析为每个图的单独数据集:

$.ajax({ 
     type: "POST", 
     dataType: 'json', 
     url: "url goes here", 
     data: "data goes here", 
     success: function (datasets) {   
      linedata = []; 
      pieData = []; 

      $.each (datasets, function (objName) { 
       if(objName.indexOf('-line') != -1) 
        linedata .push(datasets[objName]); 
         else 
        pieData.push(datasets[objName]); 
      });      

      $.plot(plotarea, linedata , options /* options defined elsewhere */); 
      $.plot(piearea, pieData, pieOptions /* pieOptions defined elsewhere */); 
     } 
    }); 
0

这很可能是最好单独绘制的价值每年,像这样:

使今年选择一些适当的组件,如递增/递减按钮。对于选定的年份,绘制每个国家的相应价值。例如,1988年,美国为483994美元,俄罗斯为218000美元。