SankeyChart

 

Inhalt:

  • Füllen von Daten

  • Properties

Allgemein

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

Beispiel: Füllen der Daten

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 final ChartModel model = ChartModel.New() .addColumn(Column.New(Column.Type.STRING, "sourcecolumn")) .addColumn(Column.New(Column.Type.STRING, "destinationColumn")) .addColumn(Column.New(Column.Type.NUMBER, "valueColumn")); model.addRow("Brazil", "Portugal", 5); model.addRow("Brazil", "France", 1); model.addRow("Brazil", "Spain", 1); model.addRow("Brazil", "England", 1); model.addRow("Canada", "Portugal", 1); model.addRow("Canada", "France", 5); model.addRow("Canada", "England", 1); model.addRow("Mexico", "Portugal", 1); model.addRow("Mexico", "France", 1); model.addRow("Mexico", "Spain", 5); model.addRow("Mexico", "England", 1); model.addRow("USA", "Portugal", 1); model.addRow("USA", "France", 1); model.addRow("USA", "Spain", 1); model.addRow("USA", "England", 5); model.addRow("Portugal", "Angola", 2); model.addRow("Portugal", "Senegal", 1); model.addRow("Portugal", "Morocco", 1); model.addRow("Portugal", "South Africa", 3); model.addRow("France", "Angola", 1); model.addRow("France", "Senegal", 3); model.addRow("France", "Mali", 3); model.addRow("France", "Morocco", 3); model.addRow("France", "South Africa", 1); model.addRow("Spain", "Senegal", 1); model.addRow("Spain", "Morocco", 3); model.addRow("Spain", "South Africa", 1); model.addRow("England", "Angola", 1); model.addRow("England", "Senegal", 1); model.addRow("England", "Morocco", 2); model.addRow("England", "South Africa", 7); model.addRow("South Africa", "China", 5); model.addRow("South Africa", "India", 1); model.addRow("South Africa", "Japan", 3); model.addRow("Angola", "China", 5); model.addRow("Angola", "India", 1); model.addRow("Angola", "Japan", 3); model.addRow("Senegal", "China", 5); model.addRow("Senegal", "India", 1); model.addRow("Senegal", "Japan", 3); model.addRow("Mali", "China", 5); model.addRow("Mali", "India", 1); model.addRow("Mali", "Japan", 3); model.addRow("Morocco", "China", 5); model.addRow("Morocco", "India", 1); model.addRow("Morocco", "Japan", 3); this.sankeyChart.setModel(model);

API und Methoden:

Properties

 

Properties

 

LinkColor Configuration

1 2 3 4 5 LinkColor.New( "black", // Color of the link border. 3, // Thickness of the link border (default 0). "white", // Color of the link. 0.4); // Transparency of the link.

Link Configuration

Controls attributes of the connections between nodes. Currently all attributes pertain to color:

1 2 3 4 5 6 7 8 // Custom color palette for sankey nodes. Nodes will cycle through this palette giving each node its own color. final List<String> colors = Arrays.asList("#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f", "#cab2d6", "#ffff99", "#1f78b4", "#33a02c"); LinkColor linkColor = LinkColor.New("black", 3, "white", 0.4); Link.New( linkColor, colors, ColorMode.GRADIENT); //Sets a coloring mode for the links between nodes.

Node Configuration

Controls attributes of the nodes (the vertical bars between links):

1 2 3 4 5 6 7 8 final Node node = Node.Builder() .colors(colors) .interactivity(true) // Allows you to select nodes. .label(TextStyle.New("black", "Arial", 12)) .labelPadding(5) // Horizontal distance between the label and the node. .nodePadding(5) // Vertical distance between nodes. .width(20) // Thickness of the node. .build();

Sankey Configuration

1 2 3 final Sankey sankey = Sankey.New(link, node); sankeyChart.setSankey(sankey);