翻譯|使用教程|編輯:楊鵬連|2020-08-12 11:12:03.667|閱讀 456 次
概述:滾動圖用于避免圖形混亂,從而提供干凈的外觀。滾動圖可以在較小的空間中顯示大量的數據圖。本文將介紹如何創建滾動圖。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
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圖表。
滾動多系列堆積柱2D
通過將type屬性的值設置為,創建一個可滾動的多系列堆疊式二維列scrollMSStackedColumn2D。
有關屬性的詳細列表,請參閱滾動多系列堆積列2D圖表的圖表屬性頁面。
因此,滾動式多系列堆積柱二維圖表如圖所示:
讓我們創建一個具有雙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正版授權,或了解更多產品信息請點擊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: