Shulou(Shulou.com)06/02 Report--

This article is to share with you about how to create a tree map in AnyGantt. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

Color level

By default, the color stop of the tree chart is ordinal, and the block is shaded with the color of the default palette. The color range is set automatically.

Ordinal number

To customize the ordinal color stop, you should explicitly create it using the ordinalColor () constructor.

Combine it with range () to set the heating range (two or more) to be marked with different colors. You can then use the colors () method to set the color for each range. Note that if no color and range are specified, the default settings for sequential color stops are used.

To set the scale to the color scale of the chart, use the colorScale () method.

(optional) you can use colorRange () to enable the color range-a special interactive element that represents levels. When using sequential color stops, the color range displays the range and its color.

This colorLineSize () allows you to customize the size of the levels (the default is 20). Check out the other settings: anychart.core.ui.ColorRange.

This example shows a tree view with sequential color stops and color ranges:

/ / 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 chartchart.colorScale (customColorScale); / / add a color rangechart.colorRange (). Enabled (true) Chart.colorRange () .length

Linear

To create a linear color stop, use the linearColor () constructor.

Then call colors () to set two colors, the first for 0 and the second for maximum heat. The tiles are automatically colored with a different blend of the two colors, and if they are not specified, the default color of the linear color stop is used.

Finally, call colorScale () to set the scale to the color scale of the chart, and call colorRange () to add the color range. Using a linear color stop, it looks like a gradient from the first color to the second color.

In the following example, there is a tree with a linear color stop and color range:

/ / 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 chartchart.colorScale (customColorScale); / / add a color rangechart.colorRange (). Enabled (true); chart.colorRange (). Length

Labels and tooltips

Tags are text or image elements that can be placed anywhere on any chart (you can enable them on the entire series or on a single point). For text tags, you can use font settings and text formatters.

A tooltip is text when the point on the graph hovers over the display box. There are many visual and other settings: for example, you can use font settings and text formatting setters to edit text, change background styles, reposition tooltips, and so on.

Tokens

To change the text of the label, use the labels () and format () methods with tokens.

To configure tooltips, do the same for the tooltip () and format () methods.

The following is a list of tags that can be used with the tree chart:

{% id}

{% name}

{% size}

{% value}

Note that the value and size of the parent element are calculated automatically, so you don't need to specify them in the data-{% value} and {% size} tags are still valid.

In addition, you can always add custom fields to the data and use the corresponding custom tags.

This example shows how to use tokens. Use a custom token {% capital} with regular tokens:

/ create datavar 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 achart and set the datachart = anychart.treeMap (data, "as-tree"); / / enable HTML for labelschart.labels () .useHtml (true); / / configure labelschart.labels () .format ("{% name} {% value}"); / / configure tooltipschart.tooltip () .format ("population: {% value}\ ncapital: {% capital}")

Formatting function

To configure labels and tooltips, you can use the formatting feature and the following fields:

Name

Size

Value

The value and size of the parent element are calculated automatically, so you do not need to specify them in the data.

You can also add custom fields to the data and reference them using the getData () method.

The following example shows how to use formatting. Use the custom field capital with regular fields:

/ create datavar 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 achart and set the datachart = anychart.treeMap (data, "as-tree"); / / enable HTML for labelschart.labels () .useHtml (true); / / configure labelschart.labels () .format (function () {var population = Math.round (this.value/100000) / 10; return "+ this.name +" + population + "mln";}) / / configure tooltipschart.tooltip () .format (function () {var population = Math.round (this.value/100000) / 10; return "population:" + population + "mln\ ncapital:" + this.getData ("capital");})

Font size

The font size of the label can be automatically adjusted according to the size of the tiles-using the tag () and adjustFontSize () and true as parameters to make this mode:

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

Header

All headings

By default, the parent element of the current display level is displayed as a title. To disable or enable them, call the headers () method with or as an argument: falsetrue

/ / disable headerschart.headers (false)

You can limit the maximum height of the title, which may be necessary when the chart is small or the chart size changes dynamically. Call the maxHeadersHeight () method and set the maximum height in pixels (default is 25) or as a percentage:

/ / set the maximum height of headerschart.maxHeadersHeight ("20%")

The text and font of the header can be configured in normal and hover states: the normal () and hovered () methods are used in conjunction with headers ().

Changing the default text of the title is similar to configuring labels and tooltips. You should use the format () method with markup or formatting features:

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

To configure the font of the title, use the methods listed in anychart.core.ui.LabelsFactory:

/ / configure the font of headerschart.normal (). Headers (). FontColor ("# 990000"); chart.normal (). Headers (). FontSize ("14"); chart.normal (). Headers (). FontWeight ('bold'); chart.hovered (). Headers (). FontColor ("# 000099")

The following example shows how to disable / enable headers; their text is customized in hover, and the font settings are changed in all states:

Personal title

You can configure each header individually by adding the header field to the data:

/ create datavar 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 achart and set the datachart = anychart.treeMap (data, "as-tree")

Display mode

By default, if the text of the title does not fit its height, the text is not displayed. However, you can hide such text, or you can always display the title text. To set the display mode of the title, call anychart.enums.LabelsDisplayMode, one of the parameters listed in headersDisplayMode and:

"alwaysShow" (default)

"clip"

"drop"

The following example shows how to change the display mode, which is initially set to "drop":

/ / set the display mode of headerschart.headersDisplayMode ("drop")

Interactivity

Drill down

By default, the tree view is interactive. It has a built-in drill-down function: if you click an element, you can drill down its children; if you click a title, you can drill up one level. You can modify this behavior-using the following methods:

DrillTo () drills into a project

DrillUp () drill up

GetDrilldownPath () to get drill-down path

Note: by default, you can also drill down or up from the context menu: right-click the block or title and choose drill Down or drill up from the menu-of course, if these options are available for this element.

Sometimes, you may also need to use the search () method of the anychart.data.Tree class to perform a search in the data (see the "Tree data Model" article for more information about manipulating tree-like data). For example, if you want to drill down a specific item in the data tree, call search () to get the project, and call drillTo () to drill down into it. To drill up, call drillUp ():

/ * locate an item in the data treeand get it as an object * / var item = treeData.search ("name", "Lvl 3-4"); / / drill down to the itemchart.drillTo (item); / / drill upchart.drillUp ()

This example shows how to use the custom feature to drill down to a specific project, drill up, and add a drill down path to the chart title:

Disable retro

To disable drilldown, add event listeners to the diagram. Use the listen () method and specify the event type-drillchange:

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

The above is how to create a tree diagram in AnyGantt. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.