JavaScript圖表工具FusionCharts入門教程(47)：放大散點圖

---

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最新版

FusionCharts Suite XT縮放散點圖是一種特殊的圖表，它是散點圖的擴展，具有縮放和平移功能，并由于這些功能而能夠顯示數百萬個數據點。

縮放散點圖主要用于查找數據集之間的相關性。圖表中的相關性可以通過數據中的可視模式來確定。數據點的數量越多，相關的精度越高。在現代畫布支持的瀏覽器（包括IE9 +）中，縮放散點圖能夠處理超過一百萬個數據點。

創建縮放散點圖

讓我們創建一個圖表，比較五個專業在20年內的錄取率（百分比）與學位的平均年回報率（百分比）。

要創建縮放散點圖，請執行以下步驟：

• 在JSON數據中，以"<attributeName>": "<value>"格式設置屬性及其對應的值。
• 使用type屬性指定圖表類型。要渲染縮放散點圖，請設置zoomscatter。
• 使用renderAt屬性設置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。

用于創建縮放散點圖的一些屬性是：

• id 屬性設置數據圖的唯一ID。
• x 屬性指定數據圖的x坐標。
• y 屬性指定數據圖的y坐標。

以上屬性屬于data對象（數據集對象的子對象）。

有關屬性的詳細列表，請參考縮放散點圖的圖表屬性頁面。
看一下下面顯示的示例縮放散點圖：

將光標拖到圖表上以選擇并放大數據點的子集。

在渲染時，將顯示縮放散點圖以及數據的宏觀視圖。要選擇數據點的子集并放大它們，請將鼠標指針拖到數據點上。將繪制一個矩形以突出顯示選定的數據點，并且將縮放該矩形內的所有點。

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

對于在有限圖表空間內呈現的大量數據，此圖表可幫助您識別數據之間的相關性，并通過縮放和平移到數據中來進一步分析數據。

縮放散點圖工具欄

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

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

由于性能方面的考慮，FusionCharts不包含用于為數據點定義外部URL的支持API，因此無法使縮放散點圖中的錨點可點擊。

現在，讓我們看看如何在縮放散點圖中繪制回歸線。

繪制回歸線

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

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

要在縮放散點圖中繪制回歸線，請將showRegressionLine屬性設置為1。此屬性的默認值為0。
請參閱下面給出的代碼：

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

帶有回歸線的縮放散點圖如下所示： 回歸模式

可以使用以下兩種模式之一繪制回歸線：

• y on X：（默認模式）時使用y值預測，或一種趨勢y計算值的基礎上，X值
• X on Y：在預測x值或基于y值計算x值趨勢時使用

在上面所示的變焦散點圖，其回歸線繪制在?上X模式。

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

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

該圖表如下圖所示：

下面給出了用于繪制兩種模式的回歸線的公式：

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

---

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