So erstellen Sie ein Liniendiagramm in cn1

Question

Ich möchte ein Liniendiagramm machen, aber ich habe ziemlich keine Ahnung, wie Sie die Diagramm-API verwenden. Ich habe den Code für das Erstellen eines Kreisdiagramms angepasst, um ein Liniendiagramm zu erstellen. Ich würde wirklich die Hilfe bei der Implementierung schätzen oder wenn es ein Tutorial gibt, wie man ein Liniendiagramm erstellt, das großartig wäre.

package userclasses; 

import com.codename1.charts.ChartComponent; 
import com.codename1.charts.models.XYMultipleSeriesDataset; 
import com.codename1.charts.models.XYSeries; 
import com.codename1.charts.renderers.XYMultipleSeriesRenderer; 
import com.codename1.charts.util.ColorUtil; 
import com.codename1.charts.views.LineChart; 
import com.codename1.ui.Form; 
import com.codename1.ui.layouts.BorderLayout; 

/** 
* 
* @author Robin 
*/ 
public class LineGraph1 { 
    private XYMultipleSeriesRenderer buildXYMSRenderer(int[] colors) { 
     XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer(); 
     renderer.setLabelsTextSize(15); 
     renderer.setLegendTextSize(15); 
     renderer.setMargins(new int[]{20, 30, 15, 0}); 

     return renderer; 
    } 

    protected XYMultipleSeriesDataset buildXYMultipleSeriesDataSeries(String title, double[] xValues, double[] yValues) { 
     XYMultipleSeriesDataset series = new XYMultipleSeriesDataset(); 
     int k = 0; 
     XYSeries xys = new XYSeries(title); 
     for (int i = 0; i < xValues.length; i++) { 
      xys.add(xValues[i], yValues[i]); 
     } 
{ 

     } 
     series.addSeries(xys); 

     return series ; 
    } 

    public Form createLineChartForm() { 

     // Generate the values 
     double[] xValues = new double[]{1, 2, 3, 4, 5}; 
     double[] yValues = new double[]{20,26,31,21,44}; 


     // Set up the renderer 
     int[] colors = new int[]{ColorUtil.BLUE, ColorUtil.GREEN, ColorUtil.MAGENTA, ColorUtil.YELLOW, ColorUtil.CYAN}; 
     XYMultipleSeriesRenderer renderer = buildXYMSRenderer(colors); 
     renderer.setZoomButtonsVisible(true); 
     renderer.setZoomEnabled(true); 
     renderer.setChartTitleTextSize(20); 
     renderer.setDisplayValues(true); 
     renderer.setShowLabels(true); 
     //SimpleSeriesRenderer r = renderer.getSeriesRendererAt(0); 

     // Create the chart ... pass the values and renderer to the chart object. 


     LineChart chart = new LineChart(buildXYMultipleSeriesDataSeries("Project budget", xValues, yValues), renderer); 
     //LineChart chart2 = new LineChart(buildXYMultipleSeriesDataSeries("Project budget", values), new XYMultipleSeriesRenderer()); 
     // Wrap the chart in a Component so we can add it to a form 
     ChartComponent c = new ChartComponent(chart); 

     // Create a form and show it. 
     Form f = new Form("Graph"); 
     f.setLayout(new BorderLayout()); 
     f.addComponent(BorderLayout.CENTER, c); 
     return f; 
    } 
} 

Answer 1

Ich stimme zu, das Diagramm-Paket ist ziemlich niedrigen Niveau. Wir möchten vielleicht etwas "benutzerfreundlicheres" anbieten.

Ich schlage vor, gehen durch die Liniendiagramm Demo-Code in der neuen Karten-Demo, die etwas vereinfacht: https://www.codenameone.com/blog/charts-demo-revisited.html

Schauen Sie sich den Code here, die dieses Liniendiagramm erzeugt: