Detaillierte Information finden Sie zusätzlich hier: https://developers.google.com/chart/interactive/docs/gallery/tabletreemap

Beispiel: Füllen der Daten

Code Block

language	java

final ChartModel model = ChartModel.New()
	.addColumn(Column.New(Column.Type.STRING, "Name"idColumn))
	.addColumn(Column.New(Column.Type.NUMBERSTRING, "Salary"parentIdColumn))
	.addColumn(Column.New(Column.Type.BOOLEAN, "Full Time Employee"));

model.addRow("Mike", Cell.New(10000, "$10.000"), true.NUMBER, sizeColumn));

model.addRow("Shakespeare", null, 0);
model.addRow("Comedies", "Shakespeare", null);
model.addRow("Tragedies", "Shakespeare", null);
model.addRow("Histories", "Shakespeare", null);
model.addRow("As You Like It", "Comedies", null);
model.addRow("Adam", "As You Like It", 10);
model.addRow("Amiens", "As You Like It", 10);
model.addRow("Audrey", "As You Like It", 12);
model.addRow("Celia", "As You Like It", 108);
model.addRow("Charles", "As You Like It", 8);
model.addRow("Corin", "As You Like It", 24);
model.addRow("Dennis", "As You Like It", 2);
model.addRow("Duke", "As You Like It", 32);
model.addRow("Frederick", "As You Like It", 20);
model.addRow("Hymen", "As You Like It", 1);
model.addRow("Jaques (lord)", "As You Like It", 57);
model.addRow("Jaques (son)", "As You Like It", 2);
model.addRow("Le Beau", "As You Like It", 14);
model.addRow("Oliver", "As You Like It", 37);
model.addRow("Jim"Orlando", "As You Like It", Cell.New(8000, "$8.000"), false120);
model.addRow("Phebe", "As You Like It", 23);
model.addRow("Rosalind", "As You Like It", 201);
model.addRow("Silvius", "As You Like It", 24);
model.addRow("Alice", Cell.New(12500, "$12.500"), trueSir Oliver Martext", "As You Like It", 3);
model.addRow("Touchstone", "As You Like It", 74);
model.addRow("William", "As You Like It", 11);
model.addRow("Comedy Of Errors", "Comedies", null);
model.addRow("Bob"Adriana", "Comedy Of Errors", Cell.New(7000, "$7.000"), true79);
model.addRow("Aegeon", "Comedy Of Errors", 17);
model.addRow("Aemilia", "Comedy Of Errors", 16);
model.addRow("Angelo", "Comedy Of Errors", 31);

tableCharttreeMapChart.setModel(model);

API und Methoden:

tableChartsetFrozenColumns2

Properties

AllowHTML

If set to true, formatted values of cells that include HTML tags will be rendered as HTML. If set to false, most custom formatters will not work properlyHeaderColor

The color of the header section for each node. Specify an HTML color value.

Code Block

language	java

this.tableCharttreeMapChart.setAllowHtmlsetHeaderColor(true"#009688");

AlternatingRowStyle

Determines if alternating color style will be assigned to odd and even rowsHeaderHeight

The height of the header section for each node, in pixels (can be zero).

Code Block

language	java

this.tableChart.setAlternatingRowStylesetHeaderHeight(true15);

FirstRowNumberHeaderHighlightColor

The row number for the first row in the dataTable. Used only if showRowNumber is truecolor of the header of a node being hovered over. Specify an HTML color value or null; if null this value will be headerColor lightened by 35%.

Code Block

language	java

this.tableCharttreeMapChart.setFirstRowNumbersetHeaderHighlightColor(5"");

FrozenColumns

The number of columns from the left that will be frozen. These columns will remain in place when scrolling the remaining columns horizontally. If showRowNumber is false, setting frozenColumns to 0 will appear the same as if set to null, but if showRowNumber is set to true, the row number column will be frozenHighlightOnMouseOver

Determines if elements should show highlighted effects when moused over. If set to true, highlighting for different elements can be specified using the various highlightColor options.

Code Block

language	java

this.

treeMapChart.

setHighlightOnMouseOver(

true);

Page

If and how to enable paging through the data. Choose one of the following string values:

'enable' - The table will include page-forward and page-back buttons. Clicking on these buttons will perform the paging operation and change the displayed page. You might want to also set the pageSize option.
'event' - The table will include page-forward and page-back buttons, but clicking them will trigger a 'page' event and will not change the displayed page. This option should be used when the code implements its own page turning logic. See the TableQueryWrapper example for an example of how to handle paging events manually.
'disable' - [Default] Paging is not supported.

Code Block
this.tableChart.setPage(ActionMode.ENABLE);

PageSize

The number of rows in each page, when paging is enabled with the page option.

Code Block
this.tableChart.setPageSize(5);

PagingButtons

Sets a specified option for the paging buttons. The options are as follows:

'both' - enable prev and next buttons
'prev' - only prev button is enabled
'next' - only next button is enabled
'auto' - the buttons are enabled according to the current page. On the first page only next is shown. On the last page only prev is shown. Otherwise both are enabled.
number - the number of paging buttons to show. This explicit number will override computed number from pageSize.

Code Block
this.tableChart.setPagingButtons(PagingButtons.Both());

RtlTable

Adds basic support for right-to-left languages (such as Arabic or Hebrew) by reversing the column order of the table, so that column zero is the rightmost column, and the last column is the leftmost column. This does not affect the column index in the underlying data, only the order of display. Full bi-directional (BiDi) language display is not supported by the table visualization even with this option. This option will be ignored if you enable paging (using the page option), or if the table has scroll bars because you have specified height and width options smaller than the required table size.

Code Block
this.tableChart.setRtlTable(true);

ScrollLeftStartPositionHintOpacity

When maxPostDepth is greater than 1, causing nodes below the current depth to be shown, hintOpacity specifies how transparent it should be. It should be between 0 and 1; the higher the value, the fainter the node.

Code Block
this.treeMapChart.setHintOpacity(2);

Max / Mid / MinColor

The color for a rectangle with a column 3 value of maxColorValue. Specify an HTML color value.

Code Block

language	java

this.treeMapChart.setMinColor("#009688");

MaxDepth

The maximum number of node levels to show in the current view. Levels will be flattened into the current plane. If your tree has more levels than this, you will have to go up or down to see them. You can additionally see maxPostDepth levels below this as shaded rectangles within these nodes.

Code Block
this.treeMapChart.setMaxDepth(1);

Max / Mid / MinHighlightColor

Sets the horizontal scrolling position, in pixels, if the table has horizontal scroll bars because you have set the width property. The table will open scrolled that many pixels past the leftmost column.

Code Block
this.tableCharttreeMapChart.setScrollLeftStartPositionsetMinHighlightColor(2"#8c6bb1");

ShowRowNumber

If set to true, shows the row number as the first column of the tableMaxPostDepth

How many levels of nodes beyond maxDepth to show in "hinted" fashion. Hinted nodes are shown as shaded rectangles within a node that is within the maxDepth limit.

Code Block

language	java

this.tableCharttreeMapChart.setShowRowNumbersetMaxPostDepth(true2);

Sort

If and how to sort columns when the user clicks a column heading. If sorting is enabled, consider setting the sortAscending and sortColumn properties as well. Choose one of the following string values:

'enable' - [Default] Users can click on column headers to sort by the clicked column. When users click on the column header, the rows will be automatically sorted, and a 'sort' event will be triggered.

'event' - When users click on the column header, a 'sort' event will be triggered, but the rows will not be automatically sorted. This option should be used when the page implements its own sort. See the TableQueryWrapper example for an example of how to handle sorting events manually.

'disable' - Clicking a column header has no effect

NoColor

The color to use for a rectangle when a node has no value for column 3, and that node is a leaf (or contains only leaves). Specify an HTML color value.

Code Block
this.treeMapChart.setNoColor("");

NoHightlightColor

The color to use for a rectangle of "no" color when highlighted. Specify an HTML color value or null; if null, this will be the value of noColor lightened by 35%.

Code Block
this.treeMapChart.setNoHighlightColor("");

ShowScale

Whether or not to show a color gradient scale from minColor to maxColor along the top of the chart. Specify true to show the scale.

Code Block
this.tableChart.setSortShowScale(ActionMode.ENABLEtrue);

StartPage

The first table page to display. Used only if page is in mode enable/event.ShowTooltip

Whether to show tooltips.

Code Block

language	java

this.tableChart.setStartPagesetShowTooltips(1true);

Versions Compared

Old Version 2

New Version Current

Key

Beispiel: Füllen der Daten

API und Methoden:

Page Comparison

Versions Compared

Old Version 2

New Version Current

Key

Beispiel: Füllen der Daten

API und Methoden: