Lihat Pie Chart di Sketchware

Di Sketchware, untuk membuat aplikasi di mana data dengan nilai numerik dapat ditambahkan dan dilihat sebagai diagram lingkaran, ikuti langkah-langkah yang diberikan di bawah ini. 

1. Buat proyek baru di Sketchware. 

2. Di  main.xml  tambahkan dua Tombol  button1 dan  button2 , dan ListView  listview2 .

3. Buat CustomView  items.xml  dan tambahkan dua TextViews di dalamnya  textview1  dan  textview2 .

4. Pilih  items.xml  sebagai CustomView of  listview2 . 

5. Di  MainActivity.java , tambahkan komponen Preferensi Bersama  sp: sp , komponen  dialog_add , dan komponen Intent  i .

6. Tambahkan peta variabel  Peta , tiga variabel String  jsondata ,  label  dan  nilai , dan daftar peta  MapMap . 

7. Dalam   acara onCreate, gunakan blok untuk mendapatkan data dari preferensi bersama ke daftar  peta  dan menampilkannya di ListView.

8. Dalam   acara onBindCustomView , tampilkan data dari daftar  peta  di TextViews di CustomView items.xml.

9. Buat CustomView  dialog_view.xml yang berisi LinearLayout  linear2  dan  linear3  untuk menambahkan bidang EditText yang dibuat secara terprogram.

10. Dalam acara  button1 onClick  (Add Button), gunakan blok untuk menampilkan Kotak Dialog Kustom yang dapat digunakan untuk menambahkan data ke daftar.

Kode di sumber add pertama langsung memblokir pada gambar di atas, membuat dua EditText secara terprogram, menambahkan mereka ke LinearLayouts di CustomView  dialog_view.xml , dan menetapkan CustomView sebagai Tampilan Dialog. 
final EditText dialog_edittext1 = new EditText(MainActivity.this);
dialog_edittext1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
dialog_edittext1.setHint("Text");

final EditText dialog_edittext2 = new EditText(MainActivity.this);
dialog_edittext2.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
dialog_edittext2.setHint("Number");
dialog_edittext2.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL | InputType.TYPE_NUMBER_FLAG_SIGNED);

View inflated_view = getLayoutInflater().inflate(R.layout.dialog_view, null);

LinearLayout dialog_linear1 = inflated_view.findViewById(R.id.linear2);
LinearLayout dialog_linear2 = inflated_view.findViewById(R.id.linear3);

dialog_linear1.addView(dialog_edittext1);
dialog_linear2.addView(dialog_edittext2);
dialog_add.setView(inflated_view);

Kode yang digunakan dalam sumber add kedua langsung memblokir pada gambar di atas, mendapatkan data dari bidang EditText ke variabel String
label = dialog_edittext1.getText().toString();
value = dialog_edittext2.getText().toString();

11. Buat Tampilan baru 
piechart.xml . 

12. Dalam hal  button2 onClick  di  MainActivity.java , menyimpan  maplist  untuk Preferensi Bersama dan digunakan Niat untuk pindah ke  PiechartActivity.java .

13. Dalam  piechart.xml  tambahkan LinearV  linear1 . 

14. Di  PiechartActivity .java  menambahkan komponen Preferensi Bersama  sp: sp , petavariabel  Peta , dan daftar peta  MapMap . 

15. Dalam   event onCreate, gunakan blok untuk mendapatkan data dari Preferensi Bersama ke  listmap , dan kode untuk menampilkan ListMap ini di PieChartView.

Kode yang digunakan dalam blok add source langsung adalah 
PieChartView chart = new PieChartView (this, listmap, "number", "text");

linear1.addView (Chart); 
Di sini 'teks' dan 'angka' adalah kunci yang digunakan untuk menambahkan item ke Daftar Peta di MainActivity.java. 

16. Buat Lebih Blok  ekstra .

17. Di blok  tambahan , gunakan  sumber tambah langsung  blok dan masukkan kode untuk mendefinisikan kelas Lihat  PieChartView . 


}

public class PieChartView extends View {
private Paint fillPaint;
private Paint strokePaint;
private ArrayList<HashMap<String, Object>> list = new ArrayList<>();
private String numkey;
private String labelkey;

public PieChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){
super(context);
fillPaint = new Paint();
strokePaint = new Paint();
this.list = list;
this.numkey = numkey;
this.labelkey = labelkey;
}

@Override
protected void onDraw(Canvas canvas) {
int viewWidth = this.getMeasuredWidth();
int viewHeight = this.getMeasuredHeight();

float startAngle = 0;
float sweepAngle = 0;
int lineHeight = 0;
float total = 0;
for (int i =0; i<list.size(); i++){
total = total + Float.valueOf(list.get(i).get(numkey).toString());
}

fillPaint.setStyle(android.graphics.Paint.Style.FILL);
strokePaint.setStyle(android.graphics.Paint.Style.STROKE);
strokePaint.setStrokeWidth(2);
strokePaint.setColor(Color.BLACK);

for (int i =0; i<list.size(); i++){
int col = 100+(155*i/list.size());
fillPaint.setColor(Color.rgb(40, col, col));
startAngle = startAngle+sweepAngle;
sweepAngle = 360*Float.valueOf(list.get(i).get(numkey).toString())/total;
canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, fillPaint);
canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, strokePaint);

lineHeight = lineHeight + 80;

canvas.drawRect(40, viewWidth - 120 + lineHeight - 40, 80, viewWidth - 120+ lineHeight, fillPaint);

fillPaint.setColor(Color.BLACK); fillPaint.setTextSize(40); canvas.drawText(list.get(i).get(labelkey).toString() + " : " +  list.get(i).get(numkey).toString(), 100, viewWidth - 120+ lineHeight, fillPaint);
}
}

Kode ini hanya berfungsi untuk nilai positif dan bukan untuk nilai desimal. 


Untuk menggunakan warna acak untuk PieChart, dalam kode di atas ubah 
int col = 100+ (155 * i / list.size ()); 
fillPaint.setColor (Color.rgb (40, col, col)); 
to 
int r = getRandom (0, 255); 
int g = getRandom (0, 255); 
int b = getRandom (0, 255);

fillPaint.setColor (Color.rgb (r, g, b)); 

18. Simpan  dan Jalankan  proyek.