Inhalt:

Füllen von Daten
Properties

Allgemein

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

Beispiel: Füllen der Daten

final ChartModel model = ChartModel.New()
	.addColumn(Column.New(Column.Type.STRING, idColumn))
	.addColumn(Column.New(Column.Type.STRING, parentIdColumn))
	.addColumn(Column.New(Column.Type.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("Orlando", "As You Like It", 120);
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("Sir 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("Adriana", "Comedy Of Errors", 79);
model.addRow("Aegeon", "Comedy Of Errors", 17);
model.addRow("Aemilia", "Comedy Of Errors", 16);
model.addRow("Angelo", "Comedy Of Errors", 31);

treeMapChart.setModel(model);

API und Methoden:

Properties

Properties
HeaderColor	The color of the header section for each node. Specify an HTML color value. `this.treeMapChart.setHeaderColor("#009688");`
HeaderHeight	The height of the header section for each node, in pixels (can be zero). `this.tableChart.setHeaderHeight(15);`
HeaderHighlightColor	The color 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%.
HighlightOnMouseOver	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.
HintOpacity	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.
Max / Mid / MinColor	The color for a rectangle with a column 3 value of `maxColorValue`. Specify an HTML color value.
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.
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.
MaxPostDepth	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.
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.
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%.
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.
ShowTooltip	Whether to show tooltips.

RapidClipse X Dokumentation Deutsch

TreeMapChart

Inhalt:

Allgemein

Beispiel: Füllen der Daten

API und Methoden: