JavaScript圖表工具FusionCharts入門教程(31)：如何創(chuàng)建滾動圖（一）

---

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

滾動圖用于避免圖形混亂，從而提供干凈的外觀。滾動圖可以在較小的空間中顯示大量的數(shù)據(jù)圖。
FusionCharts Suite XT中可用的滾動圖類型為：

• 滾動列二維圖
• 滾動條2D圖表
• 滾動2D圖表
• 滾動區(qū)域2D圖表
• 滾動堆積列二維圖表
• 滾動堆積條形二維圖
• 滾動組合二維圖表（單個Y）
• 滾動組合2D圖表（雙Y）
• 滾動多系列堆積柱2D
• 滾動多系列堆積列2D +線（雙Y）

滾動列2D圖表

讓我們創(chuàng)建一個滾動2D圖表來繪制2012——2013財年的銷售趨勢。
要創(chuàng)建滾動列二維圖表，請執(zhí)行以下步驟：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value&gt;"格式設(shè)置屬性及其對應(yīng)的值。
• 使用type屬性指定圖表類型。要呈現(xiàn)滾動列2D圖表，請設(shè)置scrollcolumn2d。
• 使用renderAt屬性設(shè)置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。

有關(guān)屬性的詳細(xì)列表，請參閱滾動2D圖表的圖表屬性頁面。
上面代碼的滾動2D圖表如下所示：

滾動條2D圖表

現(xiàn)在，讓我們創(chuàng)建一個滾動條二維圖表。要以2D呈現(xiàn)滾動條形圖，請將type屬性的值從更改scrollColumn2D為scrollBar2D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。
有關(guān)屬性的詳細(xì)列表，請參閱滾動條2D圖表的圖表屬性頁面。
單系列滾動條2D圖表如下所示：

滾動線2D圖表

現(xiàn)在，讓我們創(chuàng)建一個滾動2D圖表。要以2D渲染滾動折線圖，請將type屬性的值從更改scrollBar2D為scrollline2d。其余數(shù)據(jù)結(jié)構(gòu)保持不變。
有關(guān)屬性的詳細(xì)列表，請參見滾動線2D圖表的圖表屬性頁面。
單系列滾動線二維圖表如下所示：

滾動區(qū)域2D圖表

讓我們創(chuàng)建滾動區(qū)域2D圖表。要以2D渲染滾動區(qū)域圖，請將type屬性的值從更改scrollline2d為scrollarea2d。其余數(shù)據(jù)結(jié)構(gòu)保持不變。
有關(guān)屬性的詳細(xì)列表，請參見滾動區(qū)域2D圖表的圖表屬性頁面。
單系列滾動區(qū)域2D圖表如下所示：

滾動堆積列2D圖表

堆疊圖表是多系列圖表，其繪圖數(shù)據(jù)集彼此重疊。現(xiàn)在，讓我們創(chuàng)建一個滾動堆疊的二維列圖表。該示例將繪制2017財年至2018財年產(chǎn)品與服務(wù)的銷售比較。
要以2D渲染滾動堆疊的柱狀圖，請將type屬性的值更改為scrollstackedcolumn2d。
有關(guān)屬性的詳細(xì)列表，請參閱滾動堆疊式2D圖表的圖表屬性頁面。
滾動堆疊的二維列圖表如下所示：

滾動堆積條形圖2D圖

讓我們創(chuàng)建一個滾動堆積的2D條形圖。要以2D渲染滾動堆疊的條形圖，請將type屬性的值更改為scrollStackedBar2D。
有關(guān)屬性的詳細(xì)列表，請參閱滾動堆疊式2D圖表的圖表屬性頁面。
滾動堆積的條形2D圖表如下所示：

滾動組合2D圖表

現(xiàn)在，我們將創(chuàng)建一個滾動組合2D圖表，以繪制2017-2018財年的收入和所獲利潤（以美元為單位）以及利潤。
要渲染滾動組合2D圖表，請將type屬性的值更改為scrollcombi2d。
有關(guān)屬性的詳細(xì)列表，請參閱滾動組合2D圖表的圖表屬性頁面。
滾動組合2D圖表如下所示：

滾動組合2D雙Y軸圖表

要創(chuàng)建具有雙y軸的滾動組合2D圖表，請將type屬性的值更改為scrollcombidy2d。在這里，我們將繪制2018-2019財年的收入和所獲利潤（以美元為單位）以及利潤百分比。
有關(guān)屬性的詳細(xì)列表，請參閱滾動組合2D雙Y軸圖表的圖表屬性頁面。
這樣創(chuàng)建的滾動組合2D圖表（雙Y）圖表如下所示：

現(xiàn)在，讓我們自定義圖表的外觀和屬性。

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊