JavaScript圖表工具FusionCharts入門教程(46)：如何選擇散點圖

---

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

選擇散點圖是一種特殊類型的圖表，它允許用戶從給定的數據點中直觀地選擇數據的子集。從本質上講，它是XY繪圖圖（散點圖）的擴展，具有增加的功能，可以選擇圖表上任意數量的點并將其返回到服務器或JavaScript函數進行進一步處理。

這可以用于多種用途，您希望用戶從散布圖中直觀地選擇數據。例如，我們將繪制一個選擇的散點圖，以顯示在一周內在哈里的超級市場購買電視和手機的產品和所獲得的價格。

要創建選擇散點圖，請遵循以下步驟：

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

有關屬性的詳細列表，請參閱選擇散點圖的圖表屬性頁面。

這樣創建的選擇散點圖如下所示：

選擇點集

要選擇一組點，可以在圖表上拖動并繪制一個矩形。現在，此矩形內的所有點都是選定點。繪制矩形后，您可以調整其大小以調整更多點。調整大小處理程序使您可以這樣做。

您可以分別拖動，調整大小或刪除任何選擇的矩形。要刪除任何矩形，可以單擊X選擇框右上角的。

選擇后，單擊Submit按鈕。此按鈕將JSON / XML數據作為表單發送到服務器端腳本。在上面的示例中，所選點的JSON數據-每個電視/手機的價格和數量-已顯示在表格中。單擊Restore按鈕將圖表恢復到原始狀態。

獲取選定的數據在選擇散點圖中選擇數據點的子集并單擊之后Submit，選定的數據將發送到服務器端腳本或JavaScript函數，以進行進一步處理。在這里，您將看到如何使用同一頁面上的JavaScript函數讀取更新的數據。

呈現圖表之后，要以數組形式訪問圖表數據，將調用以下函數：

//Get a reference to our chart
var chartObject= FusionCharts("chartId");

//Now get the data as array.
var arrData = chartObject.getData();

使用FusionCharts項目引用方法獲取對圖表對象的引用。接下來，要以數組形式獲取數據，請調用getData()圖表的方法。此方法以二維數組形式返回圖表數據。

下面給出的是此數組的結構的簡要說明：

現在，從該圖表中，如果您從電視數據集中選擇三個數據點，從手機數據集中選擇五個數據點，然后使用getData()圖表對象的方法將圖表數據作為數組返回，則返回的數組的表格映射可以為跟蹤如下：

然后映射到JSON數據，得到：

• 每個數據集作為數組中的一行返回
• 每行的第一列包含數據集索引
• 其余的列包含該數據集的選定點的ID
• 每行數組的長度（水平）可以不同，具體取決于為該數據集選擇的數據點數

從圖表讀取JSON數據

該圖表還提供了一種以JSON / XML格式讀取所選數據的方法。此方法名為getJSONData()，可以按以下方式調用：

//Get a reference to our chart
var chartObject= FusionCharts("SelectChart");

//Get the data from chart
var jsonRtn = chartObject.getJSONData();

//Show it to user in alert box
alert(jsonRtn);

該函數getJSONData()返回所選數據。此功能還用于從圖表中檢索完整的數據。要從圖表中獲取完整的數據，您需要將其false作為參數傳遞給函數。例如，var jsonRtn = chartObject.getJSONData(false);

配置為顯示如何檢索和更新所選數據的選擇散點圖如下所示：

現在，讓我們在選擇散點圖中自定義繪圖回歸線的外觀和屬性。

繪制回歸線

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

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

要顯示回歸線，請將showRegressionLine屬性設置為1。將其設置為0（默認）將隱藏回歸線。

請參閱下面給出的代碼：

{
    "chart": {
        "showRegressionLine": "1"
    }
}

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

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

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

在上面所示的選擇散點圖，回歸線被繪制在?上X模式。

使用X on Y模式繪制的回歸線相同的樣本如下所示。要設置模式并定制回歸線，請執行以下步驟：

• 設置showYOnX屬性以1指定繪制回歸線的方式。
• 使用regressionLineColor屬性指定回歸線的十六進制顏色代碼。
• 使用regressionLineThickness屬性設置回歸線的粗細。
• 使用regressionLineAlpha屬性設置回歸線的透明度（0到100之間）。

請參閱下面給出的代碼：

{
    "chart": {
        "showYOnX": "0",
        "regressionLineColor": "f4cb00",
        "regressionLineThickness": "3",
        "regressionLineAlpha": "70"
    }
}

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

> Y on X：X上的Y的回歸方程是形式為y = a + bx的最佳擬合直線方程，其中x是解釋變量，y是因變量，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正版授權，或了解更多產品信息請點擊