CodeName One Kreisdiagramm

1. Daten sammeln:

Die Daten für das Kreisdiagramm werden aus den Ausgabenfeldern gesammelt, die der Benutzer in der Benutzeroberfläche eingegeben hat. Diese Daten werden in einem CategorySeries Objekt gespeichert.

<syntaxhighlight lang="java">

private void showPieChart() {

       // Kreisdiagramm
       CategorySeries series = new CategorySeries("Ausgabenverteilung");
       for (int i = 0; i < expenseFields.size(); i++) {
           String category = expenseFields.get(i).getText();
           double cost = Double.parseDouble(costFields.get(i).getText());
           series.add(category, cost);
       }

</syntaxhighligtht>

---

2. Renderer einrichten:

Ein DefaultRenderer wird erstellt und konfiguriert. Dieser Renderer bestimmt das Aussehen des Diagramms, wie die Farben der Segmente, die Größe der Beschriftungen und ob die Werte angezeigt werden sollen.

// Set up the renderer

       DefaultRenderer renderer = buildCategoryRenderer(colors);
       renderer.setChartTitleTextSize(20);
       renderer.setLabelsTextSize(15);
       renderer.setDisplayValues(true);
       renderer.setShowLabels(true);

---

Der buildCategoryRenderer ist eine Methode, die den Renderer erstellt und die Farben der einzelnen Segmente festlegt.

 private DefaultRenderer buildCategoryRenderer(int[] colors) {
       DefaultRenderer renderer = new DefaultRenderer();
       renderer.setLabelsTextSize(15);
       renderer.setLegendTextSize(15);
       renderer.setMargins(new int[]{20, 30, 15, 0});
       for (int color : colors) {
           SimpleSeriesRenderer r = new SimpleSeriesRenderer();
           r.setColor(color);
           r.setGradientEnabled(true);
           r.setGradientStart(0, color);
           r.setGradientStop(0, color);
           renderer.addSeriesRenderer(r);
       }
       return renderer;
   }

---

3. Kreisdiagramm erstellen:

Ein PieChart Objekt wird mit den gesammelten Daten und dem konfigurierten Renderer erstellt.

PieChart chart  = new PieChart(series, renderer);
ChartComponent c = new ChartComponent(chart);

---

4. Anzeigen des Diagramms:

Das Kreisdiagramm wird in einem Dialog angezeigt, der erstellt und konfiguriert wird, um das Diagramm in der Benutzeroberfläche anzuzeigen. Ein Schließen-Button wird ebenfalls hinzugefügt.

// Create a dialog to display the pie chart
       Dialog d = new Dialog("Ausgabenverteilung", new BorderLayout());
       d.add(BorderLayout.CENTER, c);

       // Modern red close button for the dialog
       Button closeButton = new Button("Schließen");
       Style closeButtonStyle = closeButton.getAllStyles();
       closeButtonStyle.setBgColor(0xE52165);
       closeButtonStyle.setFgColor(0xFFFFFF);
       closeButtonStyle.setBgTransparency(255);
       closeButtonStyle.setPadding(5, 5, 5, 5); // Smaller padding for narrower button
       closeButtonStyle.setBorder(RoundRectBorder.create().shadowOpacity(100).cornerRadius(10));
       closeButton.addActionListener(e -> d.dispose());

       closeButton.setPreferredW(100); // Width of the button
       d.add(BorderLayout.SOUTH, closeButton);

       d.showPopupDialog(salaryField); // Show the dialog near the salary field

---