JavaScript圖表工具FusionCharts入門(mén)教程(32)：如何創(chuàng)建滾動(dòng)圖（二）

---

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

點(diǎn)擊下載FusionCharts最新版

滾動(dòng)多系列堆積柱2D

通過(guò)將type屬性的值設(shè)置為，創(chuàng)建一個(gè)可滾動(dòng)的多系列堆疊式二維列scrollMSStackedColumn2D。
有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱滾動(dòng)多系列堆積列2D圖表的圖表屬性頁(yè)面。
因此，滾動(dòng)式多系列堆積柱二維圖表如圖所示：

滾動(dòng)多系列的堆積柱形圖2D +線雙Y軸圖表

讓我們創(chuàng)建一個(gè)具有雙y軸的可滾動(dòng)的多系列堆疊式二維列和折線圖。通過(guò)將type屬性的值設(shè)置為來(lái)創(chuàng)建圖表scrollMSStackedColumn2DLineDy。
有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱滾動(dòng)多系列堆積柱2D +線形雙y軸圖表的圖表屬性頁(yè)面。
因此，滾動(dòng)式多系列疊置列2D +線雙y軸圖如下所示：

配置的可視化數(shù)據(jù)地塊編號(hào)

滾動(dòng)圖通常用于避免混亂。借助FusionCharts中的數(shù)據(jù)，您還可以配置首次加載圖表時(shí)在滾動(dòng)窗格中可見(jiàn)的數(shù)據(jù)圖數(shù)量。要配置此numVisiblePlot屬性，請(qǐng)使用屬性指定可見(jiàn)圖的數(shù)量。
請(qǐng)參閱下面給出的代碼：

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

將可見(jiàn)數(shù)據(jù)圖的數(shù)量設(shè)置為十二的滾動(dòng)圖如下所示：
渲染滾動(dòng)條與梯度效應(yīng)

默認(rèn)情況下，滾動(dòng)圖具有平坦的滾動(dòng)條。您可以選擇渲染漸變滾動(dòng)條以直觀地增強(qiáng)圖表。要以漸變形式呈現(xiàn)滾動(dòng)，請(qǐng)將flatScrollBars屬性設(shè)置為0。
請(qǐng)參閱下面給出的代碼：

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

帶有漸變滾動(dòng)條的滾動(dòng)圖如下所示：
自定義滾動(dòng)條

可以使用外觀屬性自定義滾動(dòng)圖的滾動(dòng)條。要自定義滾動(dòng)條，請(qǐng)按照以下步驟操作：
使用scrollColor屬性為滾動(dòng)顏色代碼指定十六進(jìn)制代碼。
使用scrollHeight屬性指定滾動(dòng)條的高度。
使用scrollPadding屬性設(shè)置滾動(dòng)條與畫(huà)布的距離。
請(qǐng)參閱下面給出的代碼：

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

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

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

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

滾動(dòng)柱二維圖表將如下所示：

---

想要購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊