JavaScript圖表工具FusionCharts入門(mén)教程(38)：如何建立一個(gè)優(yōu)秀的樹(shù)形圖
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圖表。
樹(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ù)圖：
如何建立一個(gè)良好的樹(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)衡：
算法
訂購(gòu)
長(zhǎng)寬比
切片切丁
已訂購(gòu)
很高
平方的
沒(méi)訂購(gòu)
最低
您可以使用的其他算法包括：
- 二叉樹(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"
}
}
使用切片和切塊算法
在樹(shù)形圖中，切片和切塊切片算法是最簡(jiǎn)單的算法之一，并且在保持?jǐn)?shù)據(jù)排序的同時(shí)提供了出色的穩(wěn)定性。但是，要權(quán)衡的是它的高寬比，導(dǎo)致將樹(shù)形圖繪制為細(xì)矩形，這很難比較。
不過(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"
}
}
配置樹(shù)形圖
使用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"
}
}
上方的樹(shù)狀圖顯示了截至2015年按洲分列的全球人口及其識(shí)字率。
當(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": [{
...
}]
}
}
到目前為止使用的樣本樹(shù)圖中的數(shù)據(jù)圖顏色已使用colorRange對(duì)象分配。使用colorRangeobject定義漸變圖例的數(shù)字范圍。然后，您可以根據(jù)sValue屬性值在數(shù)字范圍內(nèi)的位置為數(shù)據(jù)圖分配顏色。
自定義個(gè)人數(shù)據(jù)圖
使用以下屬性來(lái)自定義單個(gè)數(shù)據(jù)圖：
- 使用fillColor屬性設(shè)置用于數(shù)據(jù)繪圖的顏色的十六進(jìn)制代碼。
- 使用fontColor屬性設(shè)置用于數(shù)據(jù)繪圖標(biāo)簽的顏色的十六進(jìn)制代碼。
請(qǐng)參考下面的代碼：
{
"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)制代碼。
請(qǐng)參考下面的代碼：
{
"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)制代碼。
- 通過(guò)將labelFontBold屬性的值設(shè)置為，以粗體格式顯示標(biāo)簽文本1。
- 通過(guò)將labelFontItalic屬性的值設(shè)置為，以斜體格式顯示標(biāo)簽文本1。
{
"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)簽的字體顏色和矩形的填充顏色相同或相似時(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)簽周?chē)鷳?yīng)用發(fā)光效果的半徑。
{
"chart": {
"labelGlow": "1",
"labelGlowIntensity": "50",
"labelGlowColor": "#cccc00",
"labelGlowRadius": "10"
}
}
樹(shù)形圖中使用事件
使用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)擊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線