AnyGantt中怎么創(chuàng)建一個(gè)樹(shù)狀圖

本篇文章給大家分享的是有關(guān)AnyGantt中怎么創(chuàng)建一個(gè)樹(shù)狀圖，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

色階

默認(rèn)情況下，樹(shù)形圖圖表的色標(biāo)為序數(shù)，并且圖塊以默認(rèn)調(diào)色板的顏色進(jìn)行著色。顏色范圍是自動(dòng)設(shè)置的。

序數(shù)

要自定義序數(shù)色標(biāo)，應(yīng)使用ordinalColor（）構(gòu)造函數(shù)顯式創(chuàng)建它。

將其與range（）組合以設(shè)置要用不同顏色標(biāo)記的加熱范圍（兩個(gè)或多個(gè)）。然后，您可以使用colors（）方法為每個(gè)范圍設(shè)置顏色。請(qǐng)注意，如果未指定顏色和范圍，則使用順序色標(biāo)的默認(rèn)設(shè)置。

要將比例設(shè)置為圖表的顏色比例，請(qǐng)使用colorScale（）方法。

（可選）您可以使用colorRange（）啟用顏色范圍 -表示色階的特殊交互式元素。使用順序色標(biāo)時(shí)，顏色范圍將顯示范圍及其顏色。

該colorLineSize（）允許您自定義色階（缺省值為20）的大小。查看其他設(shè)置：anychart.core.ui.ColorRange。

此示例顯示了具有順序色標(biāo)和顏色范圍的樹(shù)圖：

// create and configure a color scale.
var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
    {less: 20000000},
    {from: 20000000, to: 50000000},
    {from: 50000000, to: 70000000},
    {greater: 70000000}
]);
customColorScale.colors(["lightgray", "#9ed1de", "#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add a color range
chart.colorRange().enabled(true);
chart.colorRange().length("100%");

線(xiàn)性
要?jiǎng)?chuàng)建線(xiàn)性色標(biāo)，請(qǐng)使用linearColor（）構(gòu)造函數(shù)。
然后調(diào)用colors（）設(shè)置兩種顏色，第一種表示0，第二種表示最大熱量。瓦片會(huì)自動(dòng)以這兩種顏色的不同混合進(jìn)行著色，如果未指定它們，則會(huì)使用線(xiàn)性色標(biāo)的默認(rèn)顏色。

最后，調(diào)用colorScale（）將比例設(shè)置為圖表的顏色比例，并調(diào)用colorRange（）添加顏色范圍。使用線(xiàn)性色標(biāo)，它看起來(lái)像是從第一種顏色到第二種顏色的漸變。

在以下示例中，有一個(gè)帶有線(xiàn)性色標(biāo)和顏色范圍的樹(shù)形圖：

// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add a color range
chart.colorRange().enabled(true);
chart.colorRange().length("100%");

標(biāo)簽和工具提示

標(biāo)簽是可以放置在任何圖表上任何位置的文本或圖像元素（您可以在整個(gè)系列或單個(gè)點(diǎn)上啟用它們）。對(duì)于文本標(biāo)簽，可以使用字體設(shè)置和文本格式器。

甲工具提示是文本時(shí)的曲線(xiàn)圖上的點(diǎn)懸停在顯示框。有許多可視設(shè)置和其他設(shè)置：例如，您可以使用字體設(shè)置和文本格式設(shè)置器來(lái)編輯文本，更改背景樣式，調(diào)整工具提示的位置等等。

Tokens

要更改標(biāo)簽的文本，請(qǐng)將labels（）和format（）方法與tokens結(jié)合使用。

要配置工具提示，請(qǐng)對(duì)tooltip（）和format（）方法執(zhí)行相同的操作。

以下是可與樹(shù)圖圖表一起使用的標(biāo)記列表：

• {%id}

• {%name}

• {%size}

• {%value}

請(qǐng)注意，父元素的值和大小是自動(dòng)計(jì)算的，因此您無(wú)需在數(shù)據(jù)中指定它們- {%value}和{%size}標(biāo)記仍然有效。

此外，您始終可以將自定義字段添加到數(shù)據(jù)中，并使用與其對(duì)應(yīng)的自定義標(biāo)記。

此示例顯示了如何使用令牌。與常規(guī)令牌一起使用自定義令牌{%capital}：

// create data
var data = [
  {name:   "European Union - Top 10 Most Populated Countries", children: [
    {name: "Belgium",        value: 11443830, capital: "Brussels" },
    {name: "France",         value: 64938716, capital: "Paris"    },
    {name: "Germany",        value: 80636124, capital: "Berlin"   },
    {name: "Greece",         value: 10892931, capital: "Athens"   },
    {name: "Italy",          value: 59797978, capital: "Rome"     },
    {name: "Netherlands",    value: 17032845, capital: "Amsterdam"},
    {name: "Poland",         value: 38563573, capital: "Warsaw"   },
    {name: "Romania",        value: 19237513, capital: "Bucharest"}, 
    {name: "Spain",          value: 46070146, capital: "Madrid"   },
    {name: "United Kingdom", value: 65511098, capital: "London"   }  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(
  "{%name} {%value}"
);

// configure tooltips
chart.tooltip().format(
  "population: {%value}\ncapital: {%capital}"
);

格式化功能

要配置標(biāo)簽和工具提示，可以使用格式化功能和以下字段：

• name

• size

• value

父元素的值和大小是自動(dòng)計(jì)算的，因此您無(wú)需在數(shù)據(jù)中指定它們。

您還可以將自定義字段添加到數(shù)據(jù)中，并使用getData（）方法對(duì)其進(jìn)行引用。

下面的示例演示如何使用格式化功能。與常規(guī)字段一起使用自定義字段capital：

// create data
var data = [
  {name:   "European Union - Top 10 Most Populated Countries", children: [
    {name: "Belgium",        value: 11443830, capital: "Brussels" },
    {name: "France",         value: 64938716, capital: "Paris"    },
    {name: "Germany",        value: 80636124, capital: "Berlin"   },
    {name: "Greece",         value: 10892931, capital: "Athens"   },
    {name: "Italy",          value: 59797978, capital: "Rome"     },
    {name: "Netherlands",    value: 17032845, capital: "Amsterdam"},
    {name: "Poland",         value: 38563573, capital: "Warsaw"   },
    {name: "Romania",        value: 19237513, capital: "Bucharest"}, 
    {name: "Spain",          value: 46070146, capital: "Madrid"   },
    {name: "United Kingdom", value: 65511098, capital: "London"   }  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(function() {
  var population = Math.round(this.value/100000)/10;
  return "" + this.name + 
         " " + population + " mln";
});

// configure tooltips
chart.tooltip().format(function() {
  var population = Math.round(this.value/100000)/10;
  return "population: " + population +
         " mln\ncapital: " + this.getData("capital");
});

字體大小

標(biāo)簽的字體尺寸可根據(jù)瓦片的大小自動(dòng)地調(diào)整-使用標(biāo)記（）與adjustFontSize（）和true作為參數(shù)，以使該模式：

/* adjust the font size of labels
according to the size of tiles */
chart.labels().adjustFontSize(true);

標(biāo)頭
所有標(biāo)題

默認(rèn)情況下，當(dāng)前顯示級(jí)別的父元素顯示為標(biāo)題。要禁用或啟用它們，請(qǐng)使用或作為參數(shù)調(diào)用headers（）方法：falsetrue

// disable headers
chart.headers(false);

您可以限制標(biāo)題的最大高度，這在圖表較小或圖表大小動(dòng)態(tài)變化的情況下可能是必要的。調(diào)用maxHeadersHeight（）方法并以像素（默認(rèn)為25）或百分比形式設(shè)置最大高度：

//set the maximum height of headers
chart.maxHeadersHeight("20%");

標(biāo)頭的文本和字體可以在normal和hover 狀態(tài)下配置：將normal（）和hovered（）方法與headers（）結(jié)合使用。

更改標(biāo)題的默認(rèn)文本類(lèi)似于配置標(biāo)簽和工具提示。您應(yīng)該將format（）方法與標(biāo)記或格式化功能一起使用：

// configure the text of headers in the hovered state
chart.hovered().headers().format("{%value}");

要配置標(biāo)題的字體，請(qǐng)使用anychart.core.ui.LabelsFactory中列出的方法：

// configure the font of headers
chart.normal().headers().fontColor("#990000");
chart.normal().headers().fontSize("14");
chart.normal().headers().fontWeight('bold');
chart.hovered().headers().fontColor("#000099");

下面的示例演示如何禁用/啟用標(biāo)頭；他們的文本在懸停狀態(tài)下被自定義，并且字體設(shè)置在所有狀態(tài)下都被更改：

個(gè)人標(biāo)題

通過(guò)將header字段添加到數(shù)據(jù)，可以單獨(dú)配置每個(gè)標(biāo)頭：

// create data
var data = [
  {name:     "Slavic Languages",
   normal:  {header: {
                      format: "{%name} ({%value} Total)",
                      fontColor: "#990000",
                      fontSize: "14",
                      fontWeight: "bold"
                     }
            },
   hovered: {header: {fontColor: "#000099"}},
   children: [
    {name:   "East Slavic", header: null, children: [
      {name: "Russian",        value: 150000000},
      {name: "Ukrainian",      value:  45000000},
      {name: "Belarusian",     value:   3200000}
    ]},
    {name:   "West Slavic", header: null, children: [
      {name: "Polish",         value:  55000000},
      {name: "Czech",          value:  10600000},
      {name: "Slovak",         value:   5200000}
    ]},
    {name:   "South Slavic", header: null, children: [
      {name: "Serbo-Croatian", value:  21000000},
      {name: "Bulgarian",      value:   9000000},
      {name: "Slovene",        value:   2500000},
      {name: "Macedonian",     value:   1400000}
    ]}  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

顯示模式

默認(rèn)情況下，如果標(biāo)題的文本不適合其高度，則不顯示該文本。但是，您可以隱藏此類(lèi)文本，也可以始終顯示標(biāo)題文本。要設(shè)置標(biāo)題的顯示模式，調(diào)用headersDisplayMode與中列出的參數(shù)中的一個(gè)方法anychart.enums.LabelsDisplayMode：

• "alwaysShow" （默認(rèn)）

• "clip"

• "drop"

下面的示例演示如何更改顯示模式，該模式最初設(shè)置為"drop"：

// set the display mode of headers
chart.headersDisplayMode("drop");

互動(dòng)性
下鉆

默認(rèn)情況下，樹(shù)形圖是交互式的。它具有內(nèi)置的向下鉆取功能：如果單擊某個(gè)元素，則可以向下鉆取其子級(jí)；如果單擊一個(gè)標(biāo)題，則可以向上鉆取一個(gè)級(jí)別?？梢孕薷拇诵袨?使用以下方法：

• drillTo（）鉆取到一個(gè)項(xiàng)目

• drillUp（）向上鉆取

• getDrilldownPath（）獲取下鉆路徑

注意：默認(rèn)情況下，也可以從上下文菜單中向下或向上鉆?。河益I單擊圖塊或標(biāo)題，然后在菜單中選擇“向下鉆取”或“向上鉆取”-當(dāng)然，如果有這些選項(xiàng)可用于該元素。

有時(shí)，您可能還需要使用anychart.data.Tree類(lèi)的search（）方法在數(shù)據(jù)中執(zhí)行搜索（請(qǐng)參閱“ 樹(shù)數(shù)據(jù)模型”文章以了解有關(guān)操作類(lèi)似樹(shù)的數(shù)據(jù)的更多信息）。例如，如果要在數(shù)據(jù)樹(shù)中向下鉆取特定項(xiàng)目，請(qǐng)調(diào)用search（）以獲取該項(xiàng)目，并調(diào)用drillTo（）來(lái)對(duì)其進(jìn)行深入研究。要進(jìn)行向上鉆取，請(qǐng)調(diào)用drillUp（）：

/* locate an item in the data tree
and get it as an object */
var item = treeData.search("name", "Lvl 3-4");

// drill down to the item
chart.drillTo(item);

// drill up
chart.drillUp();

此示例顯示如何使用自定義功能向下鉆取到特定項(xiàng)目，向上鉆取并將向下鉆取路徑添加到圖表標(biāo)題：

禁用追溯

要禁用向下鉆取功能，應(yīng)將事件偵聽(tīng)器添加到圖表中。使用listen（）方法并指定事件類(lèi)型- drillchange：

// disable the drilldown feature
chart.listen("drillchange", function(e){
  return false;
});

以上就是AnyGantt中怎么創(chuàng)建一個(gè)樹(shù)狀圖，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。