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 | |
|---|---|
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 this.treeMapChart.setHeaderHighlightColor("");
|
HighlightOnMouseOver | Determines if elements should show highlighted effects when moused over. If set to this.treeMapChart.setHighlightOnMouseOver(true); |
HintOpacity | When this.treeMapChart.setHintOpacity(2); |
Max / Mid / MinColor | The color for a rectangle with a column 3 value of 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 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. this.treeMapChart.setMinHighlightColor("#8c6bb1");
|
MaxPostDepth | How many levels of nodes beyond this.treeMapChart.setMaxPostDepth(2); |
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. 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 this.treeMapChart.setNoHighlightColor("");
|
ShowScale | Whether or not to show a color gradient scale from this.tableChart.ShowScale(true); |
ShowTooltip | Whether to show tooltips. this.tableChart.setStartPage(1); |