JavaScript圖表工具FusionCharts入門(mén)教程(35)：氣泡圖和散點(diǎ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頁(yè)面。它是你值得信賴(lài)的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶(hù)選擇Fusioncharts來(lái)制作專(zhuān)業(yè)的JavaScript圖表。

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

回歸模式
可以以下列方式之一繪制回歸線(xiàn)：

• ?上X：（默認(rèn)模式）當(dāng)y值預(yù)測(cè)，或一種趨勢(shì)y值進(jìn)行計(jì)算，基于該X值
• X on Y：基于y值預(yù)測(cè)x值或計(jì)算x值趨勢(shì)時(shí)

上面顯示的帶有回歸線(xiàn)的散點(diǎn)圖在X模式下使用Y。

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

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

請(qǐng)參考下面的代碼：

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

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

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

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

繪制象限

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

請(qǐng)參閱下面給出的代碼：

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

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

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

請(qǐng)參閱下面給出的代碼：

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

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

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

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

在XY圖表中，您還可以為所有單個(gè)象限設(shè)置標(biāo)簽。要在圖表上添加標(biāo)簽，請(qǐng)遵循以下幾點(diǎn)：

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

請(qǐng)參閱下面給出的代碼：

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

自定義標(biāo)簽象限

上圖所示的象限標(biāo)簽可以根據(jù)用例進(jìn)行定制。可以通過(guò)設(shè)置每個(gè)化妝品屬性的屬性來(lái)對(duì)其進(jìn)行自定義。您可以自定義字體，字體顏色，透明度和字體大小。如果需要，還可以自定義標(biāo)簽邊框和背景的化妝品。

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

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

氣泡圖顯示了象限標(biāo)簽的上述外觀屬性，如下所示：
自定義象限線(xiàn)

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

請(qǐng)參閱下面給出的代碼：

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

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

---

想要購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊