JavaScript圖表工具FusionCharts入門教程(33)：氣泡圖和散點(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萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

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

散點(diǎn)圖

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

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

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

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

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

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

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

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

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

有關(guān)屬性的詳細(xì)列表，請(qǐng)參見(jiàn)氣泡圖的圖表屬性頁(yè)面。

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

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

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

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

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

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

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

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

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

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

請(qǐng)參考下面的代碼：

{
    "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)簽

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

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

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

自動(dòng)模式

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

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

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

類別模式

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

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

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

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

---

想要購(gòu)買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊