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

---

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來制作專業的JavaScript圖表。

點擊下載FusionCharts最新版

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

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

滾動列2D圖表

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

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

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

滾動條2D圖表

現在，讓我們創建一個滾動條二維圖表。要以2D呈現滾動條形圖，請將type屬性的值從更改scrollColumn2D為scrollBar2D。其余數據結構保持不變。
有關屬性的詳細列表，請參閱滾動條2D圖表的圖表屬性頁面。
單系列滾動條2D圖表如下所示：

滾動線2D圖表

現在，讓我們創建一個滾動2D圖表。要以2D渲染滾動折線圖，請將type屬性的值從更改scrollBar2D為scrollline2d。其余數據結構保持不變。
有關屬性的詳細列表，請參見滾動線2D圖表的圖表屬性頁面。
單系列滾動線二維圖表如下所示：

滾動區域2D圖表

讓我們創建滾動區域2D圖表。要以2D渲染滾動區域圖，請將type屬性的值從更改scrollline2d為scrollarea2d。其余數據結構保持不變。
有關屬性的詳細列表，請參見滾動區域2D圖表的圖表屬性頁面。
單系列滾動區域2D圖表如下所示：

滾動堆積列2D圖表

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

滾動堆積條形圖2D圖

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

滾動組合2D圖表

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

滾動組合2D雙Y軸圖表

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

現在，讓我們自定義圖表的外觀和屬性。

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊