TreeMapChart
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 |
HighlightOnMouseOver | Determines if elements should show highlighted effects when moused over. If set to |
HintOpacity | When |
Max / Mid / MinColor | The color for a rectangle with a column 3 value of |
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 |
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 |
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 |
ShowScale | Whether or not to show a color gradient scale from |
ShowTooltip | Whether to show tooltips. |
XDEV Software Corp. - One Embarcadero Center, San Francisco, CA 94111, US
Copyright © 2015. XDEV Software Corp. All rights reserved.