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

---

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

這些圖表類型屬于FusionWidgets XT。

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

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

突出特點

您可能會發現有用的漏斗圖的功能：

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

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

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

用于顯示購買轉化分析的簡化漏斗圖如下所示：

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

繪制2D漏斗圖定制邊框

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

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

請參考下面的代碼：

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

該圖表將如下所示： 在圖表的中心顯示標簽

將showLabelsAtCenter屬性的值設置為1，以指定是否應在數據圖的中心顯示數據標簽。
JSON代碼如下所示：
請參考下面的代碼：

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

    }
}

該圖表將如下所示： 在圖例顯示標簽

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

• 將showLegend屬性的值設置為1，以顯示圖例。
• 將showLabels屬性的值設置為1，以顯示數據圖的標簽。

請參考下面的代碼：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

請參考下面的代碼：

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

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

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

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

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

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

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

請參考下面的代碼：

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

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

---

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