JavaScript圖表工具FusionCharts入門教程(38)：如何建立一個優秀的樹形圖
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圖表。
樹映射是使用樹數據結構創建的信息樹的直觀表示。它顯示為2D嵌套矩形，代表樹數據的節點和葉子以及它們之間的關系。
樹形圖應用
使用樹形圖顯示使用樹形結構顯示的層次結構信息。例如，您可以使用樹形圖顯示系統的文件夾結構。您還可以使用它來研究大型數據集中的模式和出現情況，因為顏色和大小尺寸是相關的。
樹形圖圖表
在下面給出的圖像中，您可以看到信息樹如何轉換為樹圖：
如何建立一個良好的樹形圖
- 結構化數據，使其僅具有一個根元素。
- 用矩形的顏色表示尺寸，趨勢或與關鍵值的偏差。
- 將最里面的矩形表示為葉節點。此矩形的面積始終與分配給該葉子的數據值成比例。
- 避免嵌套不是葉子的節點。這些矩形的面積不太重要。
- 要構建理想的樹圖，請將寬高比保持為1。
有關樹形圖的重要概念
平鋪
切片是一個過程，通過該過程樹形圖將大矩形劃分為較小的子矩形。理想情況下，樹圖切片算法可創建縱橫比接近于1的矩形，并根據基礎數據樹進行排序。
但是，這些屬性具有相反的關系。您需要在優化放置順序和長寬比之間進行選擇。當優化長寬比時，放置的順序變得難以預測。另一方面，如果穩定放置順序，則縱橫比會降低。因此，您可以對切片算法進行分類，例如：
- 支持低長寬比
- 支持高穩定性
- 嘗試在兩者之間取得平衡
寬高比（尤其是最里面的矩形）是樹形圖中最重要的約束之一。如果寬高比高，則樹形圖將具有細矩形，這是很難比較的。在理想情況下，樹形圖的寬高比預計為1，一眼看去，嵌套的矩形就是易于比較的正方形。
在實際的用例中，長寬比永遠不會精確地為1，但是有些算法會通過權衡順序來嘗試將其保持為1。
在下表中，您可以看到常用算法以及使用它們時必須進行的權衡：
算法
訂購
長寬比
切片切丁
已訂購
很高
平方的
沒訂購
最低
您可以使用的其他算法包括：
- 二叉樹
- 混合樹圖
互動與樹圖
相互作用模型（原樣）
樹形圖的基本交互模型包括以下內容：
- 左鍵單擊：在樹圖上單擊矩形時，樹將向下移動。根節點更改為被單擊的節點，僅繪制被單擊節點的子樹。如果無法遍歷樹，則模型將以靜默方式失敗。
- 右鍵單擊：右鍵單擊樹圖上的矩形時，樹將向上移動。根節點將替換為其直接祖先的節點。如果無法遍歷樹，則模型將以靜默方式失敗。
- 懸停：將鼠標指針懸停在樹圖上的矩形上時，將突出顯示屬于該節點的完整子樹。
- 圖例：您可以在樹圖中合并可選的漸變圖例以過濾節點。
FusionCharts實現以下模型與樹形圖進行交互：
初期階段
要向下鉆取到葉節點，請直接單擊該節點。例如，單擊北部區域中的任何節點以更改圖表視圖。
然后，要返回上一級，請單擊視圖標題中的“北部區域”，或單擊圖表右上角的“返回父級”按鈕。您也可以直接回到初始階段。為此，請單擊圖表右上角的“返回頂部”按鈕。
創建一個簡單的樹形圖
當您需要分析層次結構信息時，樹形圖很有用。您可以比較樹形圖的2D嵌套矩形，以快速從數據中獲取見解。要呈現一個樹形圖的圖表，包括所提到的項目文件夾與.js文件的其余fusioncharts.treemap.js這里。
使用以下屬性來構建簡單的樹形圖：
- 使用type屬性將圖表類型設置為treemap。
- 使用該renderAt屬性指定將在其中呈現圖表的容器對象。
- 使用該width屬性設置圖表的寬度（以像素為單位）。
- 使用該height屬性設置圖表的高度（以像素為單位）。
- 使用dataFormat屬性設置格式，數據將以這種格式傳遞給chart對象。請注意，此屬性可以接受兩組不同值中的任何一個- json（將呈現圖表的JSON數據傳遞給該dataSource屬性）和jsonurl（將.json文件的相對路徑傳遞給該dataSource屬性）或xml和xmlurl。
- 使用dataSource屬性來指定圖表將從其獲取數據的源，具體取決于傳遞給該dataFormat屬性的值。
- 使用caption屬性指定圖表標題。
- 使用subCaption屬性指定圖表子標題。
- 使用該label屬性可以指定數據項的標簽。此屬性的值呈現在特定項目的矩形內。
- 使用該value屬性可以為特定數據項設置矩形（節點）的面積。
- 使用sValue屬性指定數據項的輔助值。此值用于設置colorRange矩形（節點）的顏色（基于使用對象定義的顏色范圍）。
您可以使用漸變圖例渲染樹狀圖，漸變圖例是從colorRange定義派生的混合顏色窗格。您可以使用一對可拖動的指針繪制線性比例。這樣，您為數字范圍定義的每種顏色都將在其端點處混合到下一種顏色，從而形成漸變條。漸變比例尺上的每個點將代表唯一的顏色和值。因此，圖表中所有不同的值將根據其在漸變標度上的位置以唯一的顏色顯示。
使用以下屬性來渲染帶有漸變圖例的樹圖：
- 將showLegend屬性的值設置為1，以顯示圖例。
- 將gradient屬性的值設置為1，以顯示漸變圖例。請注意，要渲染漸變圖例，您必須將showLegend和gradient屬性的值都設置為1。
- 將startLabel屬性的值設置為漸變圖例比例的下限。
- 將endLabel屬性的值設置為漸變圖例比例的上限。
- code對于漸變圖例比例上的顏色范圍，將屬性的值設置為十六進制顏色代碼。
- 將maxValue屬性值設置為漸變圖例比例尺上顏色范圍的上限。請注意，此限制包括您分配給該屬性的值。
- 將label屬性值設置為漸變圖例比例尺上顏色范圍的標簽內容。請注意，該值將在此顏色范圍內的所有節點的工具提示文本中呈現。
{
"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"
}]
}
}
漸變圖例如下圖所示：
您可以使用交互式漸變圖例來過濾特定值范圍內的節點。拖動比例指針以設置所需的下限和上限。
與梯度圖例集合A樣品樹狀圖中僅示出具有值的（分配給這些節點sValue的屬性）之間-10和10下面的圖像中被示出。
請注意，未落入此括號的節點全部變為灰色。
對于樹形圖設置拼接算法
平鋪是將大矩形劃分為較小的子矩形的過程。理想情況下，樹圖切片算法可創建縱橫比接近1的矩形，并根據基礎數據/信息樹進行排序。
切片算法會影響將較大的矩形劃分為較小的子矩形的方式，從而影響圖表的外觀。FusionCharts支持以下算法：
使用正方化算法
樹形圖的平方算法在視覺上很吸引人，部分原因是節點靠近square形狀，但這是以無序節點為代價的。但是，由于存在，您可能更喜歡使用平方算法而不是切片和骰子算法low aspect ratio，這意味著您可以輕松比較子節點。
將algorithm屬性的值設置為squarified，以將后者用作切片算法。
請參考下面的代碼：
{
"chart": {
"algorithm": "squarified"
}
}
使用切片和切塊算法
在樹形圖中，切片和切塊切片算法是最簡單的算法之一，并且在保持數據排序的同時提供了出色的穩定性。但是，要權衡的是它的高寬比，導致將樹形圖繪制為細矩形，這很難比較。
不過，如果您想使用此算法，請使用以下屬性。請注意，您可以在3種不同的模式下使用此算法。
將algorithm屬性的值設置為sliceanddice。
將屬性的值設置為slicingMode要用于圖表的模式：
- vertical：在此模式下，從第1層開始，將第n層的所有節點垂直分割，將第n + 1層的節點水平分割。
- horizontal：在此模式下，從第1層開始，將第n層的所有節點水平切片，將第n + 1層的節點垂直切片。
- alternate：在此模式下，矩形將在同一級別上交替切片。
垂直模式
在下面給出的圖表中，您可以看到制造商的節點（例如Toyota Group，BMW Group）是垂直切片的，而其子節點是水平切片的。
請參考下面的代碼：
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "vertical"
}
}
該圖表如下圖所示：
要將切片模式設置為horizontal，請參考以下代碼：
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "horizontal"
}
}
備用模式
將切片模式設置為時alternate，請參考以下代碼：
{
"chart": {
"algorithm": "sliceanddice",
"slicingmode": "alternate"
}
}
配置樹形圖
使用FusionCharts Suite XT，您可以配置樹狀圖的功能。您可以通過多種方式自定義樹形圖。例如，您可以：
- 設置平鋪算法（確定如何將圖表劃分為節點）。
- 啟用/禁用使用導航欄來遍歷圖表。
- 設置節點的自定義顏色。
- 自定義圖表畫布中的所有文本。
- 分別自定義數據標簽。
- 設置發光效果，依此類推。
在樹形圖中，導航欄顯示一個遍歷路徑，您可以通過單擊該路徑來返回任何已遍歷的父級。
將showNavigationBar屬性的值設置為1，以在樹圖上顯示導航欄。條形圖可以顯示遍歷的路徑，并提供單擊即可切換到任何遍歷的父級的功能。否則，它還可以提供返回到上一個工具欄（只能用于返回上一步）或返回到根級別的功能。
請參考下面的代碼：
{
"chart": {
"showNavigationBar": "1"
}
}
上方的樹狀圖顯示了截至2015年按洲分列的全球人口及其識字率。
當您單擊子節點時，被單擊的節點及其子樹將替換當前的根節點。例如，當您單擊“東南亞區域”下的任何節點時，圖表視圖將變為下圖所示。請注意，所有父節點在導航欄中都是可見的，您可以通過單擊它們直接切換到其中的任何一個。
在數據驅動的樹圖中，您可以使用顏色范圍根據其值來定義數據圖的顏色。對于樹形圖，可以定義數據繪圖顏色：
- 自動根據colorRange對象的數據值。
- 手動使用fillColor屬性。
{
"chart": {
...
},
"data": [{
"label": "Top Selling Brands",
"fillcolor": "595f5d",
"value": "5800",
"data": [{
"label": "Samsung",
"fillcolor": "838986",
"value": "2217",
"data": [{
...
}]
}]
}],
"colorrange": {
...
"color": [{
...
}]
}
}
到目前為止使用的樣本樹圖中的數據圖顏色已使用colorRange對象分配。使用colorRangeobject定義漸變圖例的數字范圍。然后，您可以根據sValue屬性值在數字范圍內的位置為數據圖分配顏色。
自定義個人數據圖
使用以下屬性來自定義單個數據圖：
- 使用fillColor屬性設置用于數據繪圖的顏色的十六進制代碼。
- 使用fontColor屬性設置用于數據繪圖標簽的顏色的十六進制代碼。
請參考下面的代碼：
{
"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": [{
...
}]
}
}
自定義圖表文字
使用以下屬性可自定義圖表畫布中的所有文本，包括所有標題和子標題：
- 使用baseFont屬性設置文本的字體系列。
- 使用baseFontSize屬性設置文本的字體大小。
- 使用baseFontColor屬性設置文本顏色的十六進制代碼。
請參考下面的代碼：
{
"chart": {
"baseFont": "Arial",
"baseFontSize": "11",
"baseFontColor": "59605e"
}
}
自定義數據標簽
使用以下屬性僅自定義圖表中的數據標簽：
- 使用labelFont屬性設置標簽文本的字體系列。
- 使用labelFontSize屬性設置標簽文本的字體大小。
- 使用labelFontColor屬性設置標簽文本顏色的十六進制代碼。
- 通過將labelFontBold屬性的值設置為，以粗體格式顯示標簽文本1。
- 通過將labelFontItalic屬性的值設置為，以斜體格式顯示標簽文本1。
{
"chart": {
"labelFont": "Arial",
"labelFontSize": "12",
"labelFontColor": "ff0000",
"labelFontBold": "1",
"labelFontItalic": "1"
}
}
數據標簽應用發光效果
您可以將與標簽字體顏色不同的背景色應用于數據標簽，從而產生發光效果。當數據標簽的字體顏色和矩形的填充顏色相同或相似時，這很有用，當使用漸變圖例渲染圖表時會發生這種情況。
使用以下屬性來自定義數據標簽的發光效果：
- 將labelGlow屬性的值設置為1，以啟用發光效果。
- 使用labelGlowIntensity屬性設置發光效果的強度。
- 使用labelGlowColor屬性設置發光效果顏色的十六進制代碼。
- 使用labelGlowRadius屬性設置在標簽周圍應用發光效果的半徑。
{
"chart": {
"labelGlow": "1",
"labelGlowIntensity": "50",
"labelGlowColor": "#cccc00",
"labelGlowRadius": "10"
}
}
樹形圖中使用事件
使用FusionCharts Suite XT，您可以通過樹圖屬性為工具提示和漸變圖例等項目配置標準交互性。但是，如果需要進一步擴展圖表交互性，則可以為此圖表引發以下JavaScript事件，然后對它們進行自定義修改：
- beforeDrillDown當您深入到子節點時，將在呈現圖表之前觸發該事件。
- 該drillDown事件被觸發后，剛剛當你深入到子節點圖表呈現。
- beforeDrillUp當您向上鉆取直接父節點或根節點時，將在呈現圖表之前觸發該事件。
- 該drillUp事件被觸發后，剛剛當你深入到直接父節點或根節點圖表呈現。
- 在drillDownCancelled當觸發事件beforeDrillDown事件被中斷。
- 在drillUpCancelled當觸發事件beforeDrillUp事件被中斷。
{
"chart": {
"beforeDrillDown": "",
"drillDown": "",
"beforeDrillUp": "",
"drillUp": "",
"drillDownCancelled": "",
"drillUpCancelled": ""
}
}
想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線