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

---

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最新版

滾動多系列堆積柱2D

通過將type屬性的值設置為，創建一個可滾動的多系列堆疊式二維列scrollMSStackedColumn2D。
有關屬性的詳細列表，請參閱滾動多系列堆積列2D圖表的圖表屬性頁面。
因此，滾動式多系列堆積柱二維圖表如圖所示：

滾動多系列的堆積柱形圖2D +線雙Y軸圖表

讓我們創建一個具有雙y軸的可滾動的多系列堆疊式二維列和折線圖。通過將type屬性的值設置為來創建圖表scrollMSStackedColumn2DLineDy。
有關屬性的詳細列表，請參閱滾動多系列堆積柱2D +線形雙y軸圖表的圖表屬性頁面。
因此，滾動式多系列疊置列2D +線雙y軸圖如下所示：

配置的可視化數據地塊編號

滾動圖通常用于避免混亂。借助FusionCharts中的數據，您還可以配置首次加載圖表時在滾動窗格中可見的數據圖數量。要配置此numVisiblePlot屬性，請使用屬性指定可見圖的數量。
請參閱下面給出的代碼：

{
  "chart": {
    "numVisiblePlot": "12"
  }
}

將可見數據圖的數量設置為十二的滾動圖如下所示：
渲染滾動條與梯度效應

默認情況下，滾動圖具有平坦的滾動條。您可以選擇渲染漸變滾動條以直觀地增強圖表。要以漸變形式呈現滾動，請將flatScrollBars屬性設置為0。
請參閱下面給出的代碼：

{
  "chart": {
    "flatScrollBars": "0"
  }
}

帶有漸變滾動條的滾動圖如下所示：
自定義滾動條

可以使用外觀屬性自定義滾動圖的滾動條。要自定義滾動條，請按照以下步驟操作：
使用scrollColor屬性為滾動顏色代碼指定十六進制代碼。
使用scrollHeight屬性指定滾動條的高度。
使用scrollPadding屬性設置滾動條與畫布的距離。
請參閱下面給出的代碼：

{
  "chart": {
    "scrollColor": "#3a4660",
    "scrollHeight": "12",
    "scrollPadding": "5"
  }
}

具有自定義滾動條外觀屬性的滾動圖如下所示： 位置滾動條

FusionCharts XT套件現在允許您將滾動條與X軸分離。之前，滾動條始終與X軸耦合。現在，scrollPosition引入了一個新屬性，該屬性使您可以將滾動條放置在任何位置，而與X軸的位置無關。
在X軸位于底部或頂部的圖表中（如在柱形圖中），您可以將scrollPosition屬性的值設置為top或bottom。
在X軸位于左側或右側的圖表中（如在條形圖中），可以將scrollPosition屬性的值設置為left或right。
請參考下面的代碼：

{
    "chart": {
        "scrollPosition": "top"
    }
}

滾動柱二維圖表將如下所示：

---

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