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圖表。

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

混合模式

此模式是自動模式和類別模式的組合。它允許x軸同時顯示自動計算的x軸標(biāo)簽以及顯式定義的x軸標(biāo)簽。

具有在混合模式下呈現(xiàn)的x軸標(biāo)簽的氣泡圖如下所示：

在上圖中，您可以看到x軸顯示自動計算的標(biāo)簽以及顯式定義的標(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軸垂直分割線

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)圖中，可以用一條線連接散點(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)擊