JavaScript圖表工具FusionCharts入門(mén)教程(47)：放大散點(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最新版

FusionCharts Suite XT縮放散點(diǎn)圖是一種特殊的圖表，它是散點(diǎn)圖的擴(kuò)展，具有縮放和平移功能，并由于這些功能而能夠顯示數(shù)百萬(wàn)個(gè)數(shù)據(jù)點(diǎn)。

縮放散點(diǎn)圖主要用于查找數(shù)據(jù)集之間的相關(guān)性。圖表中的相關(guān)性可以通過(guò)數(shù)據(jù)中的可視模式來(lái)確定。數(shù)據(jù)點(diǎn)的數(shù)量越多，相關(guān)的精度越高。在現(xiàn)代畫(huà)布支持的瀏覽器（包括IE9 +）中，縮放散點(diǎn)圖能夠處理超過(guò)一百萬(wàn)個(gè)數(shù)據(jù)點(diǎn)。

創(chuàng)建縮放散點(diǎn)圖

讓我們創(chuàng)建一個(gè)圖表，比較五個(gè)專(zhuān)業(yè)在20年內(nèi)的錄取率（百分比）與學(xué)位的平均年回報(bào)率（百分比）。

要?jiǎng)?chuàng)建縮放散點(diǎn)圖，請(qǐng)執(zhí)行以下步驟：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對(duì)應(yīng)的值。
• 使用type屬性指定圖表類(lèi)型。要渲染縮放散點(diǎn)圖，請(qǐng)?jiān)O(shè)置zoomscatter。
• 使用renderAt屬性設(shè)置容器對(duì)象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對(duì)象的數(shù)據(jù)類(lèi)型（JSON / XML）。

用于創(chuàng)建縮放散點(diǎn)圖的一些屬性是：

• id 屬性設(shè)置數(shù)據(jù)圖的唯一ID。
• x 屬性指定數(shù)據(jù)圖的x坐標(biāo)。
• y 屬性指定數(shù)據(jù)圖的y坐標(biāo)。

以上屬性屬于data對(duì)象（數(shù)據(jù)集對(duì)象的子對(duì)象）。

有關(guān)屬性的詳細(xì)列表，請(qǐng)參考縮放散點(diǎn)圖的圖表屬性頁(yè)面。
看一下下面顯示的示例縮放散點(diǎn)圖：

將光標(biāo)拖到圖表上以選擇并放大數(shù)據(jù)點(diǎn)的子集。

在渲染時(shí)，將顯示縮放散點(diǎn)圖以及數(shù)據(jù)的宏觀視圖。要選擇數(shù)據(jù)點(diǎn)的子集并放大它們，請(qǐng)將鼠標(biāo)指針拖到數(shù)據(jù)點(diǎn)上。將繪制一個(gè)矩形以突出顯示選定的數(shù)據(jù)點(diǎn)，并且將縮放該矩形內(nèi)的所有點(diǎn)。

選擇并放大數(shù)據(jù)圖的子集后，所選部分將擴(kuò)展以占據(jù)圖表的整個(gè)寬度和高度。數(shù)據(jù)經(jīng)過(guò)整齊的壓縮，因此所有數(shù)據(jù)都適合圖表的高度和寬度。為了更詳細(xì)地分析數(shù)據(jù)，可以將選擇和縮放過(guò)程重復(fù)幾次，直到達(dá)到最后一個(gè)粒度級(jí)別為止。單擊工具欄上的按鈕，可以將圖表恢復(fù)到其原始的宏觀顯示模式。 

對(duì)于在有限圖表空間內(nèi)呈現(xiàn)的大量數(shù)據(jù)，此圖表可幫助您識(shí)別數(shù)據(jù)之間的相關(guān)性，并通過(guò)縮放和平移到數(shù)據(jù)中來(lái)進(jìn)一步分析數(shù)據(jù)。

縮放散點(diǎn)圖工具欄

縮放散點(diǎn)圖工具欄是此圖表用戶(hù)的重要交互模式。下圖所示的工具欄位于圖表的右上角。

下表簡(jiǎn)要描述了縮放散點(diǎn)圖工具欄上的按鈕。 為了使變焦散點(diǎn)圖，包括所提到的項(xiàng)目文件夾與.js文件的其余fusioncharts.zoomscatter.js這里。

由于性能方面的考慮，F(xiàn)usionCharts不包含用于為數(shù)據(jù)點(diǎn)定義外部URL的支持API，因此無(wú)法使縮放散點(diǎn)圖中的錨點(diǎn)可點(diǎn)擊。

現(xiàn)在，讓我們看看如何在縮放散點(diǎn)圖中繪制回歸線(xiàn)。

繪制回歸線(xiàn)

表示為直線(xiàn)的回歸線(xiàn)用于顯示x值的y值趨勢(shì)或y值的x值趨勢(shì)。因此，可以使用回歸線(xiàn)從統(tǒng)計(jì)圖畫(huà)布中的分散數(shù)據(jù)點(diǎn)得出特定趨勢(shì)，并據(jù)此預(yù)測(cè)值。例如，可以使用回歸線(xiàn)找到趨勢(shì)并預(yù)測(cè)未來(lái)的銷(xiāo)售，股票價(jià)格，貨幣匯率，培訓(xùn)計(jì)劃所帶來(lái)的生產(chǎn)率提高等等。

有幾種計(jì)算和繪制回歸線(xiàn)的方法?？s放散點(diǎn)圖使用線(xiàn)性回歸，使用最小二乘方差法（也稱(chēng)為最小絕對(duì)偏差法）。此方法通過(guò)最小化每個(gè)數(shù)據(jù)點(diǎn)與直線(xiàn)的垂直偏差的平方和來(lái)計(jì)算觀測(cè)數(shù)據(jù)的最佳擬合直線(xiàn)（如果點(diǎn)正好位于擬合線(xiàn)上，則其垂直偏差為0） 。由于先對(duì)偏差值求平方，然后求和，所以在正值和負(fù)值之間沒(méi)有抵消。

要在縮放散點(diǎn)圖中繪制回歸線(xiàn)，請(qǐng)將showRegressionLine屬性設(shè)置為1。此屬性的默認(rèn)值為0。
請(qǐng)參閱下面給出的代碼：

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

帶有回歸線(xiàn)的縮放散點(diǎn)圖如下所示： 回歸模式

可以使用以下兩種模式之一繪制回歸線(xiàn)：

• y on X：（默認(rèn)模式）時(shí)使用y值預(yù)測(cè)，或一種趨勢(shì)y計(jì)算值的基礎(chǔ)上，X值
• X on Y：在預(yù)測(cè)x值或基于y值計(jì)算x值趨勢(shì)時(shí)使用

在上面所示的變焦散點(diǎn)圖，其回歸線(xiàn)繪制在?上X模式。

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

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

該圖表如下圖所示：

下面給出了用于繪制兩種模式的回歸線(xiàn)的公式：

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

---

想要購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢(xún)?cè)诰€(xiàn)客服】