JavaScript圖表工具FusionCharts入門教程(34):氣泡圖和散點(diǎn)圖(二)
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來制作專業(yè)的JavaScript圖表。
混合模式
此模式是自動模式和類別模式的組合。它允許x軸同時顯示自動計算的x軸標(biāo)簽以及顯式定義的x軸標(biāo)簽。
具有在混合模式下呈現(xiàn)的x軸標(biāo)簽的氣泡圖如下所示:

要在類別中呈現(xiàn)x軸標(biāo)簽,請將xAxisLabelMode屬性的值設(shè)置為MIXED。
- 默認(rèn)情況下,如果xAxisLabelMode未定義屬性,并且未在數(shù)據(jù)中明確定義類別,則圖表將在auto模式下顯示x軸標(biāo)簽。
- 如果定義了類別(未定義xAxisLabelMode屬性),則圖表將切換到categories模式。您也可以通過使用xAxisLabelMode屬性顯式定義模式來強(qiáng)制上述三種模式中的任何一種。
X軸垂直分隔線是貫穿圖表中畫布的垂直線。在氣泡圖的情況下,這些線很重要,因為它們將畫布分為不同的部分。您可以根據(jù)需要配置這些行。
通過遵循以下幾點(diǎn)來配置垂直分隔線:
- 設(shè)置adjustDiv屬性以顯式設(shè)置此x軸的下限值和上限值以及分隔線的數(shù)量。默認(rèn)情況下,這是自動完成的。將此屬性設(shè)置0為禁用自動調(diào)整。要啟用它,請將此屬性設(shè)置為1。
- 要顯示沿x軸的分界線值,請將的值設(shè)置showXAxisValues為1。
- 設(shè)置numVDivLines屬性以指定要在圖表上呈現(xiàn)的垂直軸分割線的數(shù)量。
- 默認(rèn)情況下,所有分隔線均顯示其值。但是,請選擇跳過使用xAxisValuesStep屬性的每個第x(th)個分隔線值。
{ "chart": { "adjustVDiv": "1", "showXAxisValues": "1", "numVDivlines": "5", "xAxisValuesStep": "1" } }
- 設(shè)置vDivlineColor屬性以指定垂直分隔線的十六進(jìn)制顏色代碼。
- 設(shè)置vDivlineThickness屬性以指定垂直分割線的粗細(xì)。此屬性采用介于1(最薄)和5(最厚)之間的值。
- 設(shè)置vDivlineAlpha屬性以指定垂直分隔線的透明度。此屬性采用介于0(透明)和100(不透明)之間的值。
- 要將垂直分隔線渲染為虛線,請將vDivlineIsDashedattribute 的值設(shè)置為1。此屬性的默認(rèn)值為0,它將呈現(xiàn)普通的分隔線。
- 設(shè)置vDivlineDashLen屬性以指定每個破折號的長度。
- 設(shè)置vDivlineDashGap屬性以指定每個破折號之間的間隔。
{ "chart": { "vDivlineColor": "ff0000", "vDivlineThickness": "2", "vDivlineAlpha": "70", "vDivlineIsDashed": "1", "vDivlineDashLen": "4", "vDivlineDashGap": "3" } }
- 設(shè)置showAlternateVGridColor屬性以指定垂直網(wǎng)格帶的替代顏色。垂直網(wǎng)格的十六進(jìn)制顏色代碼在alternateVGridColor屬性中指定。
- 設(shè)置alternateVGridAlpha屬性以指定備用垂直網(wǎng)格帶的透明度。此屬性采用介于0(透明)和100(不透明)之間的值。
{ "chart": { "showAlternateVGridColor": "1", "alternateVGridColor": "0ffff0", "alternateVGridAlpha": "40" } }該圖表如下圖所示:

在散點(diǎn)圖中,可以用一條線連接散點(diǎn)圖。將drawLine屬性設(shè)置為1,它將使用一條線連接數(shù)據(jù)點(diǎn)。此屬性的默認(rèn)值為0。此屬性屬于dataset對象。
請參閱下面給出的代碼:
{ "chart": { "drawLine": "1" } }通過一條線連接所有數(shù)據(jù)點(diǎn)的散點(diǎn)圖如下所示:

繪制回歸線
在散點(diǎn)圖和氣泡圖中,每個數(shù)據(jù)點(diǎn)都有兩個不同的數(shù)值:x軸的x值和y軸的y值。
用直線表示的回歸線用于顯示x值的y值趨勢或y值的x值趨勢。因此,可以使用回歸線從統(tǒng)計圖畫布中的分散數(shù)據(jù)點(diǎn)得出特定趨勢并相應(yīng)地預(yù)測值。例如,回歸線可用于查找趨勢并預(yù)測未來的銷售,股票價格,貨幣匯率,培訓(xùn)計劃所帶來的生產(chǎn)率提高等。
對于散點(diǎn)圖和氣泡圖,可以根據(jù)圖表中提供的值繪制回歸線。
有幾種計算和繪制回歸線的方法。使用線性回歸的散點(diǎn)圖使用最小二乘方差法(也稱為最小絕對偏差法)。該方法通過最小化每個數(shù)據(jù)點(diǎn)與直線的垂直偏差的平方和來計算觀測數(shù)據(jù)的最佳擬合直線(如果點(diǎn)正好位于擬合線上,則其垂直偏差為0) 。由于先對偏差值求平方,然后求和,所以在正值和負(fù)值之間沒有抵消。
要在圖表中顯示回歸線,請將showRegressionLine屬性設(shè)置為1。此屬性的默認(rèn)值為0,它會隱藏該行。此屬性屬于dataset對象。
請參閱下面給出的代碼:{ "chart": { ... }, "dataset": [{ "showRegressionLine": "1" }] }帶有回歸線的散點(diǎn)圖如下所示:

想要購買FusionCharts Suite XT正版授權(quán),或了解更多產(chǎn)品信息請點(diǎn)擊