JavaScript圖表工具FusionCharts入門教程(49)：雷達(dá)圖

---

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

這些圖表類型屬于FusionWidgets XT。

使用漏斗圖繪制簡化的數(shù)據(jù)。例如，您可以將銷售數(shù)據(jù)繪制到漏斗圖中以分析銷售渠道。從結(jié)構(gòu)上講，漏斗圖由多個段組成，每個段代表一個數(shù)據(jù)點。您可以使用2D或3D渲染漏斗圖。

在漏斗圖中，簡化了數(shù)據(jù)，即，漏斗中的每個切片（部分）代表已過濾掉數(shù)據(jù)的流程。例如，如果您使用漏斗圖顯示就業(yè)過程，則第一部分將代表“申請的候選人數(shù)”。此后，每個處理流程（例如“面試階段1”，“ IQ測試”，“項目”等）將由后續(xù)的漏斗切片表示，每個切片都會過濾提供給前一個切片的數(shù)據(jù)。最后一片具有作為整個過程的最終結(jié)果的值（例如，在這種情況下為“招募候選人”）。

突出特點

您可能會發(fā)現(xiàn)有用的漏斗圖的功能：

• 單擊交互式漏斗切片，以將其與主漏斗分開。
• 繪制漏斗切片為空心填充。
• 為每個漏斗切片設(shè)置相同的傾斜角（或使其取決于數(shù)據(jù)）。
• 將3D漏斗無縫轉(zhuǎn)換為2D漏斗。
• 選擇以2D模式渲染漏斗，以更好地控制邊框和填充屬性。
• 將值顯示為實際值或百分比。
• 將值顯示為第一個值或上一個值的百分比。
• 使用智能標(biāo)簽可避免漏斗標(biāo)簽重疊。
• 將標(biāo)簽放置在漏斗圖的側(cè)面或中央。
• 輸入每個渠道切片的自定義工具文本。
• 將每個渠道切片鏈接到不同的目標(biāo)。

漏斗圖
創(chuàng)建一個漏斗圖
我們將使用下表中提供的數(shù)據(jù)創(chuàng)建一個漏斗圖，顯示購買轉(zhuǎn)化分析。它將篩選出數(shù)據(jù)，以最終顯示實際訪問了該網(wǎng)站的人數(shù)。
要創(chuàng)建漏斗圖，請按照以下步驟操作：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對應(yīng)的值。
• 使用type屬性指定圖表類型。要渲染漏斗圖，請設(shè)置funnel。
• 使用renderAt屬性設(shè)置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。
• value在data對象內(nèi)使用屬性顯示漏斗切片表示的數(shù)據(jù)的數(shù)值。
• 使用對象label內(nèi)的data屬性來指定要為渠道切片呈現(xiàn)的標(biāo)簽，例如“唯一網(wǎng)站訪問”。

用于顯示購買轉(zhuǎn)化分析的簡化漏斗圖如下所示：

使用FusionCharts Suite XT，您可以為漏斗圖配置多個外觀和功能屬性。

繪制2D漏斗圖定制邊框

默認(rèn)情況下，漏斗圖呈現(xiàn)為帶有上下文菜單的3D圖表，您可以使用該菜單在2D和3D顯示模式之間切換。但是，您可以將漏斗圖配置為在首次加載時以2D模式呈現(xiàn)，而無需使用上下文菜單。您也可以自定義漏斗圖的邊框?qū)傩?，以改善視覺效果。
要渲染具有自定義邊框?qū)傩缘?D漏斗圖，請使用以下屬性：

• 將該is2D屬性的值設(shè)置為1，以指定在加載時漏斗圖是否將以2D模式呈現(xiàn)。
• 將showPlotBorder屬性的值設(shè)置為1，以指定繪圖邊框是否可見。
• 將plotBorderColor屬性的值設(shè)置為將用于繪制繪圖邊框的顏色的十六進(jìn)制代碼。
• 設(shè)置plotBorderThickness屬性的值以指定打印邊框的粗細(xì)（以像素為單位）。
• 將plotBorderAlpha屬性的值設(shè)置在0（透明）和100（不透明）之間，以指定打印邊框的透明度。

請參考下面的代碼：

{
    "chart": {
        "is2D": "1",
        "showPlotBorder": "1",
        "plotBorderColor": "#333333",
        "plotBorderThickness": "1",
        "plotBorderAlpha": "50"
    }
}

該圖表將如下所示： 在圖表的中心顯示標(biāo)簽

將showLabelsAtCenter屬性的值設(shè)置為1，以指定是否應(yīng)在數(shù)據(jù)圖的中心顯示數(shù)據(jù)標(biāo)簽。
JSON代碼如下所示：
請參考下面的代碼：

{
    "chart": {
        "showLabelsAtCenter": "1"

    }
}

該圖表將如下所示： 在圖例顯示標(biāo)簽

您可以在圖例框中顯示標(biāo)簽，而不是與數(shù)據(jù)圖一起顯示。為此，請顯示圖例框并隱藏數(shù)據(jù)圖的標(biāo)簽。使用以下屬性：

• 將showLegend屬性的值設(shè)置為1，以顯示圖例。
• 將showLabels屬性的值設(shè)置為1，以顯示數(shù)據(jù)圖的標(biāo)簽。

請參考下面的代碼：

{
    "chart": {
        "showLegend": "1",
        "showLabels": "0"
    }
}

該圖表將如下所示： 配置圖例框的位置

默認(rèn)情況下，圖例框位于漏斗圖的底部。但是，您可以更改圖例框的位置并將其向右移動。

將legendPosition屬性的值設(shè)置為RIGHT，以將圖例框放在右側(cè)。
請參考下面的代碼：

{
    "chart": {
        "legendPosition": "RIGHT"
    },
}

該圖表將如下所示： 繪制填充的漏斗切片（在3D模式下）

在3D漏斗圖中，切片默認(rèn)情況下呈空心。但是，您可以將它們渲染為填充狀態(tài)。將isHollow屬性設(shè)置為1，以渲染填充的漏斗切片。
請參考下面的代碼：

{
    "chart": {
       "isHollow": "1"
    },
}

該圖表將如下所示： 畫出所有切片用相同的傾斜角度

默認(rèn)情況下，每當(dāng)您繪制精簡數(shù)據(jù)時，圖表都會使用可變的漏斗切片寬度-傾斜角度-直觀地描述過濾過程。但是，您也可以對所有漏斗切片使用相同的傾斜角度。將useSameSlantAngle屬性設(shè)置為1，以對所有切片使用相同的傾斜角。
請參考下面的代碼：

{
    "chart": {
       "useSameSlantAngle": "1"
    },
}

該圖表將如下所示： 顯示值前值百分比

當(dāng)以百分比顯示每個切片的值時，您可以要求圖表計算切片相對于上一個切片（而不是第一個切片）的百分比值。為此，請使用以下給出的屬性：

• 將showPercentValues屬性設(shè)置為1，以將數(shù)據(jù)值呈現(xiàn)為百分比值。
• 將percentOfPrevious屬性設(shè)置為1，以根據(jù)上一個切片確定百分比值。請注意，只有將showPercentValues屬性設(shè)置為時，此屬性才起作用1。

請參考下面的代碼：

{
    "chart": {
        "showPercentValues": "1",
        "percentOfPrevious": "1"
    },
}

該圖表將如下所示： 片Out個人漏斗切片

有時，您可能希望突出顯示重要數(shù)據(jù)，以便可以輕松地注意到它們。在漏斗圖中，您可以切分代表任何此類數(shù)據(jù)的漏斗切片。將isSliced屬性設(shè)置1為切片特定的數(shù)據(jù)切片。請注意，您可以將此屬性用作chart對象的一部分（在這種情況下，它將應(yīng)用于所有切片），也可以將對象用作data對象（在這種情況下，它僅應(yīng)用于您為其定義的切片）。
請參考下面的代碼：

{
    "chart": {
        ...
    },
    "data": [
        ...
        {
            ...
            "isSliced": "1"
        },
    ]
}

該圖表將如下所示： 配置懸停效果

使用以下屬性來配置懸停效果：

• 將設(shè)置showhovereffect為1，以啟用懸停效果。
• 將plotFillHoverColorattribute的值設(shè)置為將鼠標(biāo)指針懸停在切片上時將填充切片的顏色的十六進(jìn)制代碼。
• 將plotFillHoverAlpha屬性設(shè)置為0（透明）到100（不透明）之間的任何值，以在將鼠標(biāo)指針懸停在切片上時指定切片的透明程度。
• 將plotBorderHoverColor鼠標(biāo)指針懸停在其上方時，將attribute的值設(shè)置為繪圖邊框顏色的十六進(jìn)制代碼。
• 將plotBorderHoverAlpha屬性設(shè)置為0（透明）和100（不透明）之間的任何值，以在將鼠標(biāo)指針懸停在切片邊框上時指定切片邊框的透明度。
• 將plotBorderHoverThickness鼠標(biāo)指針懸停在切片邊框上時，將該屬性的值設(shè)置為切片邊框的粗細(xì)（以像素為單位）。

請參考下面的代碼：

{
    "chart": {
        "showPercentValues": "1",
        "showPlotBorder": "1",
        "PlotBorderAlpha": "0",
        "showHoverEffect": "1",
        "plotFillHoverColor": "#cccccc",
        "plotFillHoverAlpha": "60",
        "plotBorderHoverColor": "#333333",
        "plotBorderHoverAlpha": "60",
        "plotBorderHoverThickness": "2"
    },
}

啟用了懸停效果的圖表如下所示：

---

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