jquery flot 共依赖折线+饼图答案

【问题标题】：Jquery flot co-dependent line + pie chartjquery flot 共依赖折线+饼图
【发布时间】：2011-07-06 02:36:16
【问题描述】：

我创建了一个 ajax 驱动的浮动折线图，我希望使用折线图的总和数据在浮动饼图旁边表示。

折线图的数据可能如下所示：

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...
};

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

谢谢！

【问题讨论】：

标签： jquery flot pie-chart linechart

【解决方案1】：

最好将每年的值分别绘制成图表，如下所示：

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

【讨论】：

【解决方案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 */);  
        }
    });

【讨论】：