JavaScript圖表工具FusionCharts入門教程(33)：氣泡圖和散點圖（一）

---

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

散點圖

散點圖用于繪制根據兩個數字參數定義的數據。散點圖是多系列圖表，但其數據格式與常規多系列圖表略有不同。

標題（也稱為圖表標題）是圖表的標題，您可以為標題添加自定義文本，以及配置其字體屬性和外觀。

• 可添加字幕 。
• 字體屬性和標題修飾也可以使用屬性進行自定義。
• 您還可以自定義標題的對齊方式。

讓我們創建一個散點圖，用兩個數值繪制-日平均溫度（在x軸上繪制，啤酒和冰淇淋的銷售量（美元）在y軸上繪制）；該圖表顯示溫度如何影響啤酒和冰淇淋的銷售收入。

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

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

泡泡圖表
氣泡圖用于繪制根據三個數字參數定義的數據。第三個數字參數由氣泡的直徑表示。氣泡圖的JSON / XML格式與散點圖略有不同，這是因為氣泡圖會繪制一個附加的數字參數。
氣泡圖
標題（也稱為圖表標題）是圖表的標題。您可以為標題添加自定義文本，以及配置其字體屬性和外觀。

• 可添加字幕 。
• 字體屬性和標題修飾也可以使用屬性進行自定義。
• 您還可以自定義標題的對齊方式。

因此，讓我們創建一個氣泡圖，顯示上個月針對Harry's SuperMart的不同品牌的鞋子的銷售分析。使用type屬性指定圖表類型。要渲染氣泡圖，請設置bubble。

有關屬性的詳細列表，請參見氣泡圖的圖表屬性頁面。

上述代碼的氣泡圖如下所示：

• 對于氣泡圖和散點圖，類別是可選的，因為x軸是數字。但是，可以使用類別為x刻度上的任何位置定義自定義的x軸標簽。
• 類別可以定義x軸的數字或非數字標簽。與其他每個數據集包含的數據數組中的對象數量與類別數量相同的其他多系列圖表不同，散點圖和氣泡圖在每個數據集數組下的數據數組元素中可以具有不同數量的對象。
• 如果未定義類別，則x軸顯示自動計算的數字刻度，其中垂直分隔線和分隔線的值作為x軸標簽。
• 但是，您也可以顯式定義您選擇的類別，并僅將這些類別顯示為x軸標簽。此外，您還可以使用混合模式將類別和自動生成的x軸標簽組合在一起。所有這些都將在本節中進行解釋。

顯示在泡沫值標簽

默認情況下，數據標簽不呈現在氣泡圖中的氣泡上。要在圖表中顯示氣泡的各個標簽，請將showValues屬性設置為1。

請參閱下面給出的代碼：

{
  "chart": {
    "showValues": "1"
  }
}

帶有在氣泡上呈現的數據標簽的氣泡圖如下所示：

將x軸分割為分類區域

可以使用垂直趨勢線將氣泡/散點圖的x軸細分為分類區域。要設置分類區域，請執行以下步驟：

• 設置isTrendZone屬性以顯示趨勢區而不是線。
• 設置startValue屬性以指定趨勢區的起始值。
• 設置endValue屬性以指定趨勢區的結束值。
• color在line對象中設置屬性以指定趨勢區的顏色。
• alpha在line對象中設置屬性以指定趨勢區的透明度。

請參考下面的代碼：

{
    "chart": {
        ...
    },
    "data": {
        ...
    },
    "vtrendlines": [{
        "line": [{
                "startValue": "0",
                "endValue": "20",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "25"
            },
            {
                "startValue": "20",
                "endValue": "40",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "15"
            },
            {
                "startValue": "40",
                "endValue": "60",
                "isTrendZone": "1"
            },
            {
                "startValue": "60",
                "endValue": "80",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "25"
            },
            {
                "startValue": "80",
                "endValue": "100",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "15"
            }
        ]
    }]
}

X軸分段的氣泡圖如下所示：

配置X軸標簽

您可以為氣泡圖和散點圖配置x軸標簽的顯示模式。您可以選擇使圖表自動生成x軸標簽以及垂直分隔線，也可以顯式定義每個x軸標簽。此外，您還可以選擇混合使用這兩種模式。

要配置x軸標簽，請設置xAxisLabelMode屬性以指定呈現x軸標簽的模式。此屬性采用三個值：

• 自動（默認）
• 分類目錄
• 混合

自動模式

在自動模式下，圖表會自動計算并顯示x軸標簽。在這種模式下，圖表將忽略categories對象數組，并允許x軸繼承類似于垂直y軸的屬性。

具有在自動模式下呈現的x軸標簽的氣泡圖如下所示：

在上圖中，您可以看到x軸標簽是自動計算并顯示的。這些x軸標簽基于x軸值，而x軸值又是使用x圖表數據的值生成的。此外，與每個標簽一起，還繪制了垂直分隔線。

類別模式

在此模式下，x軸顯示由對象category數組內的categories數組對象明確定義的標簽。

在類別模式下呈現的帶有x軸標簽的氣泡圖如下所示：

在上圖中，您可以看到顯示了在category對象數組內的categories對象數組中顯式定義的標簽。不顯示自動計算的標簽。

要在類別中呈現x軸標簽，請將xAxisLabelMode屬性的值設置為CATEGORIES。

---

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