JavaScript圖表工具FusionCharts入門教程(34)：氣泡圖和散點圖（二）

---

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

點擊下載FusionCharts最新版

混合模式

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

具有在混合模式下呈現的x軸標簽的氣泡圖如下所示：

在上圖中，您可以看到x軸顯示自動計算的標簽以及顯式定義的標簽。

要在類別中呈現x軸標簽，請將xAxisLabelMode屬性的值設置為MIXED。

• 默認情況下，如果xAxisLabelMode未定義屬性，并且未在數據中明確定義類別，則圖表將在auto模式下顯示x軸標簽。

• 如果定義了類別（未定義xAxisLabelMode屬性），則圖表將切換到categories模式。您也可以通過使用xAxisLabelMode屬性顯式定義模式來強制上述三種模式中的任何一種。

配置x軸垂直分割線

X軸垂直分隔線是貫穿圖表中畫布的垂直線。在氣泡圖的情況下，這些線很重要，因為它們將畫布分為不同的部分。您可以根據需要配置這些行。

通過遵循以下幾點來配置垂直分隔線：

• 設置adjustDiv屬性以顯式設置此x軸的下限值和上限值以及分隔線的數量。默認情況下，這是自動完成的。將此屬性設置0為禁用自動調整。要啟用它，請將此屬性設置為1。
• 要顯示沿x軸的分界線值，請將的值設置showXAxisValues為1。
• 設置numVDivLines屬性以指定要在圖表上呈現的垂直軸分割線的數量。
• 默認情況下，所有分隔線均顯示其值。但是，請選擇跳過使用xAxisValuesStep屬性的每個第x（th）個分隔線值。

{
  "chart": {
    "adjustVDiv": "1",
    "showXAxisValues": "1",
    "numVDivlines": "5",
    "xAxisValuesStep": "1"
  }
}

• 設置vDivlineColor屬性以指定垂直分隔線的十六進制顏色代碼。
• 設置vDivlineThickness屬性以指定垂直分割線的粗細。此屬性采用介于1（最薄）和5（最厚）之間的值。
• 設置vDivlineAlpha屬性以指定垂直分隔線的透明度。此屬性采用介于0（透明）和100（不透明）之間的值。
• 要將垂直分隔線渲染為虛線，請將vDivlineIsDashedattribute 的值設置為1。此屬性的默認值為0，它將呈現普通的分隔線。
• 設置vDivlineDashLen屬性以指定每個破折號的長度。
• 設置vDivlineDashGap屬性以指定每個破折號之間的間隔。

{
  "chart": {
    "vDivlineColor": "ff0000",
    "vDivlineThickness": "2",
    "vDivlineAlpha": "70",
    "vDivlineIsDashed": "1",
    "vDivlineDashLen": "4",
    "vDivlineDashGap": "3"
  }
}

• 設置showAlternateVGridColor屬性以指定垂直網格帶的替代顏色。垂直網格的十六進制顏色代碼在alternateVGridColor屬性中指定。
• 設置alternateVGridAlpha屬性以指定備用垂直網格帶的透明度。此屬性采用介于0（透明）和100（不透明）之間的值。

請參考下面的代碼：

{
  "chart": {
    "showAlternateVGridColor": "1",
    "alternateVGridColor": "0ffff0",
    "alternateVGridAlpha": "40"
  }
}

該圖表如下圖所示：

連接散點圖由線

在散點圖中，可以用一條線連接散點圖。將drawLine屬性設置為1，它將使用一條線連接數據點。此屬性的默認值為0。此屬性屬于dataset對象。

請參閱下面給出的代碼：

{
  "chart": {
    "drawLine": "1"
  }
}

通過一條線連接所有數據點的散點圖如下所示：

繪制回歸線

在散點圖和氣泡圖中，每個數據點都有兩個不同的數值：x軸的x值和y軸的y值。

用直線表示的回歸線用于顯示x值的y值趨勢或y值的x值趨勢。因此，可以使用回歸線從統計圖畫布中的分散數據點得出特定趨勢并相應地預測值。例如，回歸線可用于查找趨勢并預測未來的銷售，股票價格，貨幣匯率，培訓計劃所帶來的生產率提高等。

對于散點圖和氣泡圖，可以根據圖表中提供的值繪制回歸線。

有幾種計算和繪制回歸線的方法。使用線性回歸的散點圖使用最小二乘方差法（也稱為最小絕對偏差法）。該方法通過最小化每個數據點與直線的垂直偏差的平方和來計算觀測數據的最佳擬合直線（如果點正好位于擬合線上，則其垂直偏差為0） 。由于先對偏差值求平方，然后求和，所以在正值和負值之間沒有抵消。

要在圖表中顯示回歸線，請將showRegressionLine屬性設置為1。此屬性的默認值為0，它會隱藏該行。此屬性屬于dataset對象。

請參閱下面給出的代碼：

{
    "chart": {
        ...
    },
    "dataset": [{
        "showRegressionLine": "1"
    }]
}

帶有回歸線的散點圖如下所示：

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊