JavaScript圖表工具FusionCharts入門教程(46)：如何選擇散點(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è)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

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

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

這可以用于多種用途，您希望用戶從散布圖中直觀地選擇數(shù)據(jù)。例如，我們將繪制一個(gè)選擇的散點(diǎn)圖，以顯示在一周內(nèi)在哈里的超級(jí)市場(chǎng)購(gòu)買電視和手機(jī)的產(chǎn)品和所獲得的價(jià)格。

要?jiǎng)?chuàng)建選擇散點(diǎn)圖，請(qǐng)遵循以下步驟：

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

有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱選擇散點(diǎn)圖的圖表屬性頁(yè)面。

這樣創(chuàng)建的選擇散點(diǎn)圖如下所示：

選擇點(diǎn)集

要選擇一組點(diǎn)，可以在圖表上拖動(dòng)并繪制一個(gè)矩形?，F(xiàn)在，此矩形內(nèi)的所有點(diǎn)都是選定點(diǎn)。繪制矩形后，您可以調(diào)整其大小以調(diào)整更多點(diǎn)。調(diào)整大小處理程序使您可以這樣做。

您可以分別拖動(dòng)，調(diào)整大小或刪除任何選擇的矩形。要?jiǎng)h除任何矩形，可以單擊X選擇框右上角的。

選擇后，單擊Submit按鈕。此按鈕將JSON / XML數(shù)據(jù)作為表單發(fā)送到服務(wù)器端腳本。在上面的示例中，所選點(diǎn)的JSON數(shù)據(jù)-每個(gè)電視/手機(jī)的價(jià)格和數(shù)量-已顯示在表格中。單擊Restore按鈕將圖表恢復(fù)到原始狀態(tài)。

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

呈現(xiàn)圖表之后，要以數(shù)組形式訪問圖表數(shù)據(jù)，將調(diào)用以下函數(shù)：

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

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

使用FusionCharts項(xiàng)目引用方法獲取對(duì)圖表對(duì)象的引用。接下來，要以數(shù)組形式獲取數(shù)據(jù)，請(qǐng)調(diào)用getData()圖表的方法。此方法以二維數(shù)組形式返回圖表數(shù)據(jù)。

下面給出的是此數(shù)組的結(jié)構(gòu)的簡(jiǎn)要說明：

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

然后映射到JSON數(shù)據(jù)，得到：

• 每個(gè)數(shù)據(jù)集作為數(shù)組中的一行返回
• 每行的第一列包含數(shù)據(jù)集索引
• 其余的列包含該數(shù)據(jù)集的選定點(diǎn)的ID
• 每行數(shù)組的長(zhǎng)度（水平）可以不同，具體取決于為該數(shù)據(jù)集選擇的數(shù)據(jù)點(diǎn)數(shù)

從圖表讀取JSON數(shù)據(jù)

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

//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);

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

配置為顯示如何檢索和更新所選數(shù)據(jù)的選擇散點(diǎn)圖如下所示：

現(xiàn)在，讓我們?cè)谶x擇散點(diǎn)圖中自定義繪圖回歸線的外觀和屬性。

繪制回歸線

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

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

要顯示回歸線，請(qǐng)將showRegressionLine屬性設(shè)置為1。將其設(shè)置為0（默認(rèn)）將隱藏回歸線。

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

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

帶有回歸線的選擇散點(diǎ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)圖，回歸線被繪制在?上X模式。

使用X on Y模式繪制的回歸線相同的樣本如下所示。要設(shè)置模式并定制回歸線，請(qǐng)執(zhí)行以下步驟：

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

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

{
    "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）。

---

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