翻譯|使用教程|編輯:楊鵬連|2020-08-04 14:32:53.587|閱讀 284 次
概述:組合圖類似于多系列圖。它們使您可以在同一圖表上繪制多個(gè)數(shù)據(jù)集。但是使用組合圖表的另一個(gè)好處是,您還可以在同一圖表上繪制多種圖表類型
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
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頁面。它是你值得信賴的JavaScript圖表解決方案,目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。
組合圖類似于多系列圖。它們使您可以在同一圖表上繪制多個(gè)數(shù)據(jù)集。但是使用組合圖表的另一個(gè)好處是,您還可以在同一圖表上繪制多種圖表類型。例如,您可以在同一圖表畫布上顯示柱形圖,折線圖和面積圖。
組合圖可以以2D或3D呈現(xiàn),可以具有單個(gè)或兩個(gè)y軸,并且本質(zhì)上可以堆疊或多個(gè)系列。
FusionCharts Suite XT提供的組合圖為:
讓我們創(chuàng)建我們的第一個(gè)組合圖,以展示實(shí)際收入,預(yù)計(jì)收入和去年每個(gè)月獲得的利潤的比較。使用不同的圖表類型繪制了這三個(gè)指標(biāo)-使用柱形圖繪制了實(shí)際的收入,使用折線圖繪制了預(yù)期的收入,使用面積圖繪制了所獲利潤。
要以2D方式創(chuàng)建單個(gè)y軸組合圖,請(qǐng)執(zhí)行以下步驟:
3D單Y軸組合圖#
要在3D中渲染單個(gè)y軸組合圖,請(qǐng)將type屬性的值從更改mscombi2d為mscombi3d。其余數(shù)據(jù)結(jié)構(gòu)保持不變。3D中的單個(gè)y軸組合圖如下所示:
現(xiàn)在,讓我們創(chuàng)建2D的雙Y軸組合圖。為此,將type屬性的值從更改mscombi2d為mscombidy2d。
在此圖表中,我們將顯示收入,利潤和利潤百分比之間的比較。收入和利潤將顯示為美元金額,但是利潤百分比將需要不同的單位-百分比。這些不能在單個(gè)y軸上繪制。如果您要繪制兩個(gè)具有兩個(gè)不同數(shù)字單位的數(shù)據(jù),則FusionCharts Suite XT允許您具有兩個(gè)y軸,一個(gè)主要y軸和一個(gè)次要y軸。
因此,我們?cè)谥饕膟軸(左側(cè)的一個(gè))上繪制了美元金額,在次要的y軸(右側(cè)的一個(gè))上繪制了利潤百分比。
有關(guān)屬性的詳細(xì)列表,請(qǐng)參閱2D雙Y軸組合圖的圖表屬性頁面。
具有雙Y軸的2D組合圖如下所示:
您還可以使用樣條線和樣條線區(qū)域構(gòu)建以上組合圖。若要將任何數(shù)據(jù)集定義為樣條曲線或樣條曲線區(qū)域,請(qǐng)將renderAs屬性分別設(shè)置為spline或splineArea。
在上面的例子,我們繪制的利潤%的spline和盈利的splineArea。經(jīng)過這些更改,圖表如下所示:
3D雙Y軸組合圖
現(xiàn)在,讓我們?cè)?D中創(chuàng)建一個(gè)雙Y軸組合圖。為此,將type屬性的值從更改mscombidy2d為mscombidy3d。
在此圖表中,我們將顯示收入,利潤和利潤百分比之間的比較。收入和利潤將顯示為美元金額,但是利潤百分比將需要不同的單位-百分比。這些不能在單個(gè)y軸上繪制。如果您要繪制兩個(gè)具有兩個(gè)不同數(shù)字單位的數(shù)據(jù),則FusionCharts Suite XT允許您具有兩個(gè)y軸,一個(gè)主要y軸和一個(gè)次要y軸。
因此,我們?cè)谥饕膟軸(左側(cè)的一個(gè))上繪制了美元金額,在次要的y軸(右側(cè)的一個(gè))上繪制了利潤百分比。
有關(guān)屬性的詳細(xì)列表,請(qǐng)參閱3D雙Y軸組合圖的圖表屬性頁面。
3D中的雙Y軸組合圖如下所示:
3D欄+線單Y軸圖表
現(xiàn)在,讓我們?cè)?D中創(chuàng)建一個(gè)柱線多線圖表。為此,將type屬性的值設(shè)置為mscolumnline3d。
有關(guān)屬性的詳細(xì)列表,請(qǐng)參考3D列+ y軸單線圖表的圖表屬性頁面。
下圖將顯示一年的固定成本,可變成本和預(yù)算成本之間的比較。固定成本和可變成本將顯示在列中,而預(yù)算成本將顯示在一行中。
上面的多系列序列圖如下:
3D欄+線雙Y軸圖表
要渲染具有雙y軸的3D柱形圖和折線形多系列圖表,請(qǐng)將type屬性的值從更改mscolumnline3d為mscolumn3dlinedy。有關(guān)屬性的詳細(xì)列表,請(qǐng)參閱3D列+ y線雙Y軸圖表的圖表屬性頁面。
該圖表如下圖所示:
堆積柱形圖2D線單Y軸圖表
現(xiàn)在,讓我們創(chuàng)建二維堆疊柱狀圖和折線圖的組合。為此,將typeattribute 的值設(shè)置為stackedcolumn2dline。有關(guān)屬性的詳細(xì)列表,請(qǐng)參閱堆積的2D線單y軸圖表的圖表屬性頁面。
下圖將顯示Harry's SuperMart的食品和非食品收入之間的比較。有了它,利潤將用折線圖顯示。
堆積柱形圖3D線單Y軸圖表
要使用單個(gè)y軸渲染堆積的3D柱形圖和折線圖,請(qǐng)將type屬性的值從更改stackedcolumn2dline為stackedcolumn3dline。其余數(shù)據(jù)結(jié)構(gòu)保持不變。
有關(guān)屬性的詳細(xì)列表,請(qǐng)參閱堆積的2D線單y軸圖表的圖表屬性頁面。
上面堆疊的3D列線如下所示:
想要購買FusionCharts Suite XT正版授權(quán),或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: