2011-07-06 54 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美元。