Question

我创建了一个ajax驱动的flot折线图，我希望使用折线图中的总和数据沿着一个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...
};

汇总这些数据最简单的方法是什么才能适合饼图插件？如果我将此当前结果集提供给饼图，它将只考虑每个数据集的第一个值。

谢谢！

Answer 1

最好每年单独绘制值，如下所示：

通过某些适当的组件（如递增/递减按钮）选择年份。对于选定的年份，绘制每个国家/地区的相应值。例如，在1988年，美国的情节为483994，俄罗斯的情节为218000。

Answer 2

我最终使用的方法将每个图表的结果合并到服务器端的一个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 */);  
        }
    });

Jquery flot共依赖线+饼图

2 个答案: