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來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

散點圖

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

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

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

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

要創(chuàng)建散點圖，請遵循以下步驟：

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

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

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

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

有關(guān)屬性的詳細(xì)列表，請參見氣泡圖的圖表屬性頁面。

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

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

顯示在泡沫值標(biāo)簽

默認(rèn)情況下，數(shù)據(jù)標(biāo)簽不呈現(xiàn)在氣泡圖中的氣泡上。要在圖表中顯示氣泡的各個標(biāo)簽，請將showValues屬性設(shè)置為1。

請參閱下面給出的代碼：

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

帶有在氣泡上呈現(xiàn)的數(shù)據(jù)標(biāo)簽的氣泡圖如下所示：

將x軸分割為分類區(qū)域

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

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

請參考下面的代碼：

{
    "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軸標(biāo)簽

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

要配置x軸標(biāo)簽，請設(shè)置xAxisLabelMode屬性以指定呈現(xiàn)x軸標(biāo)簽的模式。此屬性采用三個值：

• 自動（默認(rèn)）
• 分類目錄
• 混合

自動模式

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

具有在自動模式下呈現(xiàn)的x軸標(biāo)簽的氣泡圖如下所示：

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

類別模式

在此模式下，x軸顯示由對象category數(shù)組內(nèi)的categories數(shù)組對象明確定義的標(biāo)簽。

在類別模式下呈現(xiàn)的帶有x軸標(biāo)簽的氣泡圖如下所示：

在上圖中，您可以看到顯示了在category對象數(shù)組內(nèi)的categories對象數(shù)組中顯式定義的標(biāo)簽。不顯示自動計算的標(biāo)簽。

要在類別中呈現(xiàn)x軸標(biāo)簽，請將xAxisLabelMode屬性的值設(shè)置為CATEGORIES。

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊【咨詢在線客服】