JavaScript圖表工具FusionCharts入門教程(38)：如何建立一個優(yōu)秀的樹形圖

---

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

樹映射是使用樹數(shù)據(jù)結(jié)構(gòu)創(chuàng)建的信息樹的直觀表示。它顯示為2D嵌套矩形，代表樹數(shù)據(jù)的節(jié)點和葉子以及它們之間的關(guān)系。

一個簡單的樹形圖如下所示：

樹形圖應(yīng)用

使用樹形圖顯示使用樹形結(jié)構(gòu)顯示的層次結(jié)構(gòu)信息。例如，您可以使用樹形圖顯示系統(tǒng)的文件夾結(jié)構(gòu)。您還可以使用它來研究大型數(shù)據(jù)集中的模式和出現(xiàn)情況，因為顏色和大小尺寸是相關(guān)的。

樹形圖圖表

在下面給出的圖像中，您可以看到信息樹如何轉(zhuǎn)換為樹圖：

如何建立一個良好的樹形圖

• 結(jié)構(gòu)化數(shù)據(jù)，使其僅具有一個根元素。
• 用矩形的顏色表示尺寸，趨勢或與關(guān)鍵值的偏差。
• 將最里面的矩形表示為葉節(jié)點。此矩形的面積始終與分配給該葉子的數(shù)據(jù)值成比例。
• 避免嵌套不是葉子的節(jié)點。這些矩形的面積不太重要。
• 要構(gòu)建理想的樹圖，請將寬高比保持為1。

樹形圖應(yīng)利用屏幕上的最大空間。如果您有效地管理可用空間，則可以在樹圖中繪制數(shù)千個項目。

有關(guān)樹形圖的重要概念

平鋪

切片是一個過程，通過該過程樹形圖將大矩形劃分為較小的子矩形。理想情況下，樹圖切片算法可創(chuàng)建縱橫比接近于1的矩形，并根據(jù)基礎(chǔ)數(shù)據(jù)樹進(jìn)行排序。

但是，這些屬性具有相反的關(guān)系。您需要在優(yōu)化放置順序和長寬比之間進(jìn)行選擇。當(dāng)優(yōu)化長寬比時，放置的順序變得難以預(yù)測。另一方面，如果穩(wěn)定放置順序，則縱橫比會降低。因此，您可以對切片算法進(jìn)行分類，例如：

• 支持低長寬比
• 支持高穩(wěn)定性
• 嘗試在兩者之間取得平衡

寬高比

寬高比（尤其是最里面的矩形）是樹形圖中最重要的約束之一。如果寬高比高，則樹形圖將具有細(xì)矩形，這是很難比較的。在理想情況下，樹形圖的寬高比預(yù)計為1，一眼看去，嵌套的矩形就是易于比較的正方形。

在實際的用例中，長寬比永遠(yuǎn)不會精確地為1，但是有些算法會通過權(quán)衡順序來嘗試將其保持為1。

在下表中，您可以看到常用算法以及使用它們時必須進(jìn)行的權(quán)衡：

算法	訂購	長寬比
切片切丁	已訂購	很高
平方的	沒訂購	最低

您可以使用的其他算法包括：

• 二叉樹
• 混合樹圖

目前，F(xiàn)usionCharts樹圖僅支持切片和切塊以及平方算法。在將來的版本中將考慮支持更多算法。

互動與樹圖

相互作用模型（原樣）

樹形圖的基本交互模型包括以下內(nèi)容：

• 左鍵單擊：在樹圖上單擊矩形時，樹將向下移動。根節(jié)點更改為被單擊的節(jié)點，僅繪制被單擊節(jié)點的子樹。如果無法遍歷樹，則模型將以靜默方式失敗。
• 右鍵單擊：右鍵單擊樹圖上的矩形時，樹將向上移動。根節(jié)點將替換為其直接祖先的節(jié)點。如果無法遍歷樹，則模型將以靜默方式失敗。
• 懸停：將鼠標(biāo)指針懸停在樹圖上的矩形上時，將突出顯示屬于該節(jié)點的完整子樹。
• 圖例：您可以在樹圖中合并可選的漸變圖例以過濾節(jié)點。

FusionCharts樹圖交互模型

FusionCharts實現(xiàn)以下模型與樹形圖進(jìn)行交互：

初期階段
要向下鉆取到葉節(jié)點，請直接單擊該節(jié)點。例如，單擊北部區(qū)域中的任何節(jié)點以更改圖表視圖。
然后，要返回上一級，請單擊視圖標(biāo)題中的“北部區(qū)域”，或單擊圖表右上角的“返回父級”按鈕。您也可以直接回到初始階段。為此，請單擊圖表右上角的“返回頂部”按鈕。

創(chuàng)建一個簡單的樹形圖

當(dāng)您需要分析層次結(jié)構(gòu)信息時，樹形圖很有用。您可以比較樹形圖的2D嵌套矩形，以快速從數(shù)據(jù)中獲取見解。要呈現(xiàn)一個樹形圖的圖表，包括所提到的項目文件夾與.js文件的其余fusioncharts.treemap.js這里。

使用以下屬性來構(gòu)建簡單的樹形圖：

• 使用type屬性將圖表類型設(shè)置為treemap。
• 使用該renderAt屬性指定將在其中呈現(xiàn)圖表的容器對象。
• 使用該width屬性設(shè)置圖表的寬度（以像素為單位）。
• 使用該height屬性設(shè)置圖表的高度（以像素為單位）。
• 使用dataFormat屬性設(shè)置格式，數(shù)據(jù)將以這種格式傳遞給chart對象。請注意，此屬性可以接受兩組不同值中的任何一個- json（將呈現(xiàn)圖表的JSON數(shù)據(jù)傳遞給該dataSource屬性）和jsonurl（將.json文件的相對路徑傳遞給該dataSource屬性）或xml和xmlurl。
• 使用dataSource屬性來指定圖表將從其獲取數(shù)據(jù)的源，具體取決于傳遞給該dataFormat屬性的值。
• 使用caption屬性指定圖表標(biāo)題。
• 使用subCaption屬性指定圖表子標(biāo)題。
• 使用該label屬性可以指定數(shù)據(jù)項的標(biāo)簽。此屬性的值呈現(xiàn)在特定項目的矩形內(nèi)。
• 使用該value屬性可以為特定數(shù)據(jù)項設(shè)置矩形（節(jié)點）的面積。
• 使用sValue屬性指定數(shù)據(jù)項的輔助值。此值用于設(shè)置colorRange矩形（節(jié)點）的顏色（基于使用對象定義的顏色范圍）。

上面顯示的樹狀圖將銷售團(tuán)隊在本年度的表現(xiàn)與上一年的表現(xiàn)進(jìn)行了比較。單擊一個矩形以將節(jié)點替換為當(dāng)前的根節(jié)點。例如，單擊北部區(qū)域中的任何矩形（節(jié)點）以更改圖表視圖，如下圖所示： 呈現(xiàn)一個梯度傳說

您可以使用漸變圖例渲染樹狀圖，漸變圖例是從colorRange定義派生的混合顏色窗格。您可以使用一對可拖動的指針繪制線性比例。這樣，您為數(shù)字范圍定義的每種顏色都將在其端點處混合到下一種顏色，從而形成漸變條。漸變比例尺上的每個點將代表唯一的顏色和值。因此，圖表中所有不同的值將根據(jù)其在漸變標(biāo)度上的位置以唯一的顏色顯示。

使用以下屬性來渲染帶有漸變圖例的樹圖：

• 將showLegend屬性的值設(shè)置為1，以顯示圖例。
• 將gradient屬性的值設(shè)置為1，以顯示漸變圖例。請注意，要渲染漸變圖例，您必須將showLegend和gradient屬性的值都設(shè)置為1。
• 將startLabel屬性的值設(shè)置為漸變圖例比例的下限。
• 將endLabel屬性的值設(shè)置為漸變圖例比例的上限。

除了上面詳述的屬性外，您還需要在該color對象下設(shè)置其他3個屬性（在下面詳細(xì)說明）的值，該屬性定義漸變圖例比例的顏色范圍。

• code對于漸變圖例比例上的顏色范圍，將屬性的值設(shè)置為十六進(jìn)制顏色代碼。
• 將maxValue屬性值設(shè)置為漸變圖例比例尺上顏色范圍的上限。請注意，此限制包括您分配給該屬性的值。
• 將label屬性值設(shè)置為漸變圖例比例尺上顏色范圍的標(biāo)簽內(nèi)容。請注意，該值將在此顏色范圍內(nèi)的所有節(jié)點的工具提示文本中呈現(xiàn)。

請參考下面的代碼：

{
    "chart": {
        ...
    },
    "data": [{
        ...
    }],
    "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-25",
        "code": "e24b1a",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [{
            "code": "ffffff",
            "maxvalue": "0",
            "label": "Static"
        }, {
            "code": "6da81e",
            "maxvalue": "25",
            "label": "AVERAGE"
        }]
    }
}

漸變圖例如下圖所示： 使用梯度圖例顯示/隱藏數(shù)據(jù)值

您可以使用交互式漸變圖例來過濾特定值范圍內(nèi)的節(jié)點。拖動比例指針以設(shè)置所需的下限和上限。

與梯度圖例集合A樣品樹狀圖中僅示出具有值的（分配給這些節(jié)點sValue的屬性）之間-10和10下面的圖像中被示出。

請注意，未落入此括號的節(jié)點全部變?yōu)榛疑?/span>

單擊此處以獲取樹圖支持的屬性的完整列表。

對于樹形圖設(shè)置拼接算法

平鋪是將大矩形劃分為較小的子矩形的過程。理想情況下，樹圖切片算法可創(chuàng)建縱橫比接近1的矩形，并根據(jù)基礎(chǔ)數(shù)據(jù)/信息樹進(jìn)行排序。

切片算法會影響將較大的矩形劃分為較小的子矩形的方式，從而影響圖表的外觀。FusionCharts支持以下算法：

使用正方化算法

樹形圖的平方算法在視覺上很吸引人，部分原因是節(jié)點靠近square形狀，但這是以無序節(jié)點為代價的。但是，由于存在，您可能更喜歡使用平方算法而不是切片和骰子算法low aspect ratio，這意味著您可以輕松比較子節(jié)點。

將algorithm屬性的值設(shè)置為squarified，以將后者用作切片算法。
請參考下面的代碼：

{
    "chart": {
        "algorithm": "squarified"
    }
}

使用切片和切塊算法

在樹形圖中，切片和切塊切片算法是最簡單的算法之一，并且在保持?jǐn)?shù)據(jù)排序的同時提供了出色的穩(wěn)定性。但是，要權(quán)衡的是它的高寬比，導(dǎo)致將樹形圖繪制為細(xì)矩形，這很難比較。

不過，如果您想使用此算法，請使用以下屬性。請注意，您可以在3種不同的模式下使用此算法。
將algorithm屬性的值設(shè)置為sliceanddice。
將屬性的值設(shè)置為slicingMode要用于圖表的模式：

• vertical：在此模式下，從第1層開始，將第n層的所有節(jié)點垂直分割，將第n + 1層的節(jié)點水平分割。
• horizontal：在此模式下，從第1層開始，將第n層的所有節(jié)點水平切片，將第n + 1層的節(jié)點垂直切片。
• alternate：在此模式下，矩形將在同一級別上交替切片。

查找每種切片模式的示例，如下所示：

垂直模式

在下面給出的圖表中，您可以看到制造商的節(jié)點（例如Toyota Group，BMW Group）是垂直切片的，而其子節(jié)點是水平切片的。
請參考下面的代碼：

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "vertical"
    }
}

該圖表如下圖所示： 水平模式

要將切片模式設(shè)置為horizontal，請參考以下代碼：

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "horizontal"
    }
}

備用模式

將切片模式設(shè)置為時alternate，請參考以下代碼：

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "alternate"
    }
}

配置樹形圖

使用FusionCharts Suite XT，您可以配置樹狀圖的功能。您可以通過多種方式自定義樹形圖。例如，您可以：

• 設(shè)置平鋪算法（確定如何將圖表劃分為節(jié)點）。
• 啟用/禁用使用導(dǎo)航欄來遍歷圖表。
• 設(shè)置節(jié)點的自定義顏色。
• 自定義圖表畫布中的所有文本。
• 分別自定義數(shù)據(jù)標(biāo)簽。
• 設(shè)置發(fā)光效果，依此類推。

渲染遍歷路徑導(dǎo)航欄

在樹形圖中，導(dǎo)航欄顯示一個遍歷路徑，您可以通過單擊該路徑來返回任何已遍歷的父級。

將showNavigationBar屬性的值設(shè)置為1，以在樹圖上顯示導(dǎo)航欄。條形圖可以顯示遍歷的路徑，并提供單擊即可切換到任何遍歷的父級的功能。否則，它還可以提供返回到上一個工具欄（只能用于返回上一步）或返回到根級別的功能。

請參考下面的代碼：

{
    "chart": {
        "showNavigationBar": "1"
    }
}

上方的樹狀圖顯示了截至2015年按洲分列的全球人口及其識字率。

當(dāng)您單擊子節(jié)點時，被單擊的節(jié)點及其子樹將替換當(dāng)前的根節(jié)點。例如，當(dāng)您單擊“東南亞區(qū)域”下的任何節(jié)點時，圖表視圖將變?yōu)橄聢D所示。請注意，所有父節(jié)點在導(dǎo)航欄中都是可見的，您可以通過單擊它們直接切換到其中的任何一個。

顏色樹形圖數(shù)據(jù)圖

在數(shù)據(jù)驅(qū)動的樹圖中，您可以使用顏色范圍根據(jù)其值來定義數(shù)據(jù)圖的顏色。對于樹形圖，可以定義數(shù)據(jù)繪圖顏色：

• 自動根據(jù)colorRange對象的數(shù)據(jù)值。
• 手動使用fillColor屬性。

請參考下面的代碼：

{
    "chart": {
        ...
    },
    "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
            "label": "Samsung",
            "fillcolor": "838986",
            "value": "2217",
            "data": [{
                ...
            }]
        }]
    }],
    "colorrange": {
        ...
        "color": [{
            ...
        }]
    }
}

到目前為止使用的樣本樹圖中的數(shù)據(jù)圖顏色已使用colorRange對象分配。使用colorRangeobject定義漸變圖例的數(shù)字范圍。然后，您可以根據(jù)sValue屬性值在數(shù)字范圍內(nèi)的位置為數(shù)據(jù)圖分配顏色。

自定義個人數(shù)據(jù)圖

使用以下屬性來自定義單個數(shù)據(jù)圖：

• 使用fillColor屬性設(shè)置用于數(shù)據(jù)繪圖的顏色的十六進(jìn)制代碼。
• 使用fontColor屬性設(shè)置用于數(shù)據(jù)繪圖標(biāo)簽的顏色的十六進(jìn)制代碼。

自定義單個數(shù)據(jù)圖的字體顏色。其他定制（如字體系列或字體大?。┰趩蝹€數(shù)據(jù)圖級別上不可用。
請參考下面的代碼：

{
    "chart": {
        ...
    },
    "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
            "label": "Samsung",
            "fillcolor": "838986",
            "value": "2217",
            "data": [{
                "label": "Galaxy Note 4",
                "value": "519",
                "sValue": "1.09",
                "fillColor": "1b7ac7"
            }{
                ...
            }]
        }]
    }],
    "colorrange": {
        ...
        "color": [{
            ...
        }]
    }
}

自定義圖表文字

使用以下屬性可自定義圖表畫布中的所有文本，包括所有標(biāo)題和子標(biāo)題：

• 使用baseFont屬性設(shè)置文本的字體系列。
• 使用baseFontSize屬性設(shè)置文本的字體大小。
• 使用baseFontColor屬性設(shè)置文本顏色的十六進(jìn)制代碼。

基本字體屬性會影響圖表上的所有文本，包括所有標(biāo)題和子標(biāo)題。
請參考下面的代碼：

{
    "chart": {
        "baseFont": "Arial",
        "baseFontSize": "11",
        "baseFontColor": "59605e"
    }
}

自定義數(shù)據(jù)標(biāo)簽

使用以下屬性僅自定義圖表中的數(shù)據(jù)標(biāo)簽：

• 使用labelFont屬性設(shè)置標(biāo)簽文本的字體系列。
• 使用labelFontSize屬性設(shè)置標(biāo)簽文本的字體大小。
• 使用labelFontColor屬性設(shè)置標(biāo)簽文本顏色的十六進(jìn)制代碼。
• 通過將labelFontBold屬性的值設(shè)置為，以粗體格式顯示標(biāo)簽文本1。
• 通過將labelFontItalic屬性的值設(shè)置為，以斜體格式顯示標(biāo)簽文本1。

標(biāo)簽字體屬性僅影響圖表上的數(shù)據(jù)標(biāo)簽。

{
    "chart": {
        "labelFont": "Arial",
        "labelFontSize": "12",
        "labelFontColor": "ff0000",
        "labelFontBold": "1",
        "labelFontItalic": "1"
    }
}

數(shù)據(jù)標(biāo)簽應(yīng)用發(fā)光效果

您可以將與標(biāo)簽字體顏色不同的背景色應(yīng)用于數(shù)據(jù)標(biāo)簽，從而產(chǎn)生發(fā)光效果。當(dāng)數(shù)據(jù)標(biāo)簽的字體顏色和矩形的填充顏色相同或相似時，這很有用，當(dāng)使用漸變圖例渲染圖表時會發(fā)生這種情況。

使用以下屬性來自定義數(shù)據(jù)標(biāo)簽的發(fā)光效果：

• 將labelGlow屬性的值設(shè)置為1，以啟用發(fā)光效果。
• 使用labelGlowIntensity屬性設(shè)置發(fā)光效果的強(qiáng)度。
• 使用labelGlowColor屬性設(shè)置發(fā)光效果顏色的十六進(jìn)制代碼。
• 使用labelGlowRadius屬性設(shè)置在標(biāo)簽周圍應(yīng)用發(fā)光效果的半徑。

請參考下面的代碼：

{
    "chart": {
        "labelGlow": "1",
        "labelGlowIntensity": "50",
        "labelGlowColor": "#cccc00",
        "labelGlowRadius": "10"
    }
}

樹形圖中使用事件

使用FusionCharts Suite XT，您可以通過樹圖屬性為工具提示和漸變圖例等項目配置標(biāo)準(zhǔn)交互性。但是，如果需要進(jìn)一步擴(kuò)展圖表交互性，則可以為此圖表引發(fā)以下JavaScript事件，然后對它們進(jìn)行自定義修改：

• beforeDrillDown當(dāng)您深入到子節(jié)點時，將在呈現(xiàn)圖表之前觸發(fā)該事件。
• 該drillDown事件被觸發(fā)后，剛剛當(dāng)你深入到子節(jié)點圖表呈現(xiàn)。
• beforeDrillUp當(dāng)您向上鉆取直接父節(jié)點或根節(jié)點時，將在呈現(xiàn)圖表之前觸發(fā)該事件。
• 該drillUp事件被觸發(fā)后，剛剛當(dāng)你深入到直接父節(jié)點或根節(jié)點圖表呈現(xiàn)。
• 在drillDownCancelled當(dāng)觸發(fā)事件beforeDrillDown事件被中斷。
• 在drillUpCancelled當(dāng)觸發(fā)事件beforeDrillUp事件被中斷。

請參考下面的代碼：

{
    "chart": {
        "beforeDrillDown": "",
        "drillDown": "",
        "beforeDrillUp": "",
        "drillUp": "",
        "drillDownCancelled": "",
        "drillUpCancelled": ""
    }
}

---

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