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

---

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

點擊下載FusionCharts最新版

回歸模式
可以以下列方式之一繪制回歸線：

• ?上X：（默認模式）當y值預(yù)測，或一種趨勢y值進行計算，基于該X值
• X on Y：基于y值預(yù)測x值或計算x值趨勢時

上面顯示的帶有回歸線的散點圖在X模式下使用Y。

在這里，讓我們嘗試使用使用X on Y模式繪制的回歸線的相同圖表。用于設(shè)置模式和定制回歸線的屬性的簡要描述為：

• 將showYonX屬性設(shè)置為0將在Y模式下的X上繪制回歸線。此屬性的默認值為1，它在X模式下的Y中繪制回歸線。此屬性屬于dataset對象。
• 要設(shè)置繪制回歸線所用的顏色，請指定regressionLineColor屬性的十六進制顏色代碼。
• 使用regressionLineThickness屬性設(shè)置回歸線的粗細。
• 使用regressionLineAlpha屬性設(shè)置回歸線的透明度。

請參考下面的代碼：

{
  "chart": {
    "showYonX": "1",
    "regressionLineColor": "ff0000",
    "regressionLineThickness": "5",
    "regressionLineAlpha": "70"
  }
}

使用X on Y模式繪制的具有回歸線的同一圖表如下所示：
下面給出了用于繪制兩種模式的回歸線的公式：

Y于X：回歸方程Y于X的形式為最佳擬合直線的方程Y = A + BX，其中X是解釋變量和?是因變量和B =（NΣ（XY ）-（Σx）。（Σy））/（nΣx2–（Σx）2）。

X Y上：回歸方程X Y上的形式是最好的擬合直線的方程X = A +通過，其中?是解釋變量和X是因變量和B =（NΣ（XY。 ）-（Σx）。（Σy））/（nΣy2–（Σy）2）。

繪制象限

將氣泡/散點圖的畫布劃分為多個象限可以使圖表的分析更加容易。將drawQuadrantattribute 的值設(shè)置為1以繪制圖表的象限。此屬性的默認值為0。

請參閱下面給出的代碼：

{
  "chart": {
    "drawQuadrant": "1"
  }
}

用象限呈現(xiàn)的氣泡圖如下所示：

用象限渲染的氣泡圖也可以在用戶定義的位置繪制。要指定垂直和水平象限線的位置，請分別將值設(shè)置為quadrantXVal和quadrantYVal屬性。這些屬性的值應(yīng)在其相應(yīng)的相對軸（而不是像素）的范圍內(nèi)。

請參閱下面給出的代碼：

{
  "chart": {
    //Drawing quadrants on chart
    "drawQuadrant": "1",

    //Setting x quadrant value to 54
    "quadrantXVal": "54",

    //Setting y quadrant value to 12000
    "quadrantYVal": "12000"
  }
}

在用戶定義的位置繪制有象限的呈現(xiàn)的氣泡圖如下所示：
顯示象限標簽

在XY圖表中，您還可以為所有單個象限設(shè)置標簽。要在圖表上添加標簽，請遵循以下幾點：

• 設(shè)置quadrantLabelTL屬性以指定左上象限的標簽。
• 設(shè)置quadrantLabelTR屬性以指定右上象限的標簽。
• 設(shè)置quadrantLabelBL屬性以指定左下象限的標簽。
• 設(shè)置quadrantLabelBR屬性以指定右下象限的標簽。

請參閱下面給出的代碼：

{
  "chart": {
    "quadrantLabelTL": "Low Price / High Sale",
    "quadrantLabelTR": "High Price / High Sale",
    "quadrantLabelBL": "Low Price / Low Sale",
    "quadrantLabelBR": "High Price / Low Sale"
  }
}

自定義標簽象限

上圖所示的象限標簽可以根據(jù)用例進行定制?？梢酝ㄟ^設(shè)置每個化妝品屬性的屬性來對其進行自定義。您可以自定義字體，字體顏色，透明度和字體大小。如果需要，還可以自定義標簽邊框和背景的化妝品。

我們將使用象限標簽的某些外觀屬性來創(chuàng)建樣本。請參閱下面給出的代碼：

{
  "chart": {
    "quadrantLabelFontItalic": "1",
    "quadrantLabelFontBold": "1",
    "quadrantLabelTLFontColor": "#123456",
    "quadrantLabelTRFontColor": "#ABCDEF",
    "quadrantLabelBLFontColor": "#123ABC",
    "quadrantLabelBRFontColor": "#DEF456"
  }
}

氣泡圖顯示了象限標簽的上述外觀屬性，如下所示：
自定義象限線

• 使用下面給出的屬性列表來自定義氣泡圖中的象限線：
• 設(shè)置quadrantLineThickness屬性以指定象限線的粗細。
• 設(shè)置quadrantLineAlpha屬性的值以指定0（透明）和100（不透明）之間象限線的透明度。
• 設(shè)置quadrantLineColor屬性以指定象限線的十六進制顏色代碼。
• 要將象限線渲染為虛線，請將quadrantLineIsDashed屬性設(shè)置為1。
• 設(shè)置quadrantLineDashLen屬性以指定每個破折號的長度。
• 設(shè)置quadrantLineDashGap屬性以指定每個破折號之間的間隔。
• 設(shè)置quadrantLabelPadding屬性以指定象限標簽和相關(guān)象限線之間的間隔。

請參閱下面給出的代碼：

{
  "chart": {
    "quadrantLineThickness": "2",
    "quadrantLineAlpha": "30",
    "quadrantLineColor": "#ac3d44",
    "quadrantLineIsDashed": "1",
    "quadrantLineDashLen": "2",
    "quadrantLineDashGap": "3",
    "quadrantLabelPadding": "5"
  }
}

使用自定義象限線呈現(xiàn)的氣泡圖如下所示：

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊【咨詢在線客服】