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

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

樹(shù)形圖應(yīng)用

使用樹(shù)形圖顯示使用樹(shù)形結(jié)構(gòu)顯示的層次結(jié)構(gòu)信息。例如，您可以使用樹(shù)形圖顯示系統(tǒng)的文件夾結(jié)構(gòu)。您還可以使用它來(lái)研究大型數(shù)據(jù)集中的模式和出現(xiàn)情況，因?yàn)轭伾痛笮〕叽缡窍嚓P(guān)的。

樹(shù)形圖圖表

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

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

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

平鋪

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

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

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

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

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

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

• 二叉樹(shù)
• 混合樹(shù)圖

互動(dòng)與樹(shù)圖

相互作用模型（原樣）

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

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

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

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

創(chuàng)建一個(gè)簡(jiǎn)單的樹(shù)形圖

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

使用以下屬性來(lái)構(gòu)建簡(jiǎn)單的樹(shù)形圖：

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

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

使用以下屬性來(lái)渲染帶有漸變圖例的樹(shù)圖：

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

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

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

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

請(qǐng)注意，未落入此括號(hào)的節(jié)點(diǎn)全部變?yōu)榛疑?/span>

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

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

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

使用正方化算法

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

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

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

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

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

垂直模式

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

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

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

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

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

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

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

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

在樹(shù)形圖中，導(dǎo)航欄顯示一個(gè)遍歷路徑，您可以通過(guò)單擊該路徑來(lái)返回任何已遍歷的父級(jí)。

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

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

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

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

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

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

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

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

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

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

{
    "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": [{
            ...
        }]
    }
}

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

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

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

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

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

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

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

使用以下屬性來(lái)自定義數(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，您可以通過(guò)樹(shù)圖屬性為工具提示和漸變圖例等項(xiàng)目配置標(biāo)準(zhǔn)交互性。但是，如果需要進(jìn)一步擴(kuò)展圖表交互性，則可以為此圖表引發(fā)以下JavaScript事件，然后對(duì)它們進(jìn)行自定義修改：

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

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

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