Сайт разработчика Александр Климова

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Библиотека GraphView

Библиотека для построения графиков двух видов.

Официальная страница

Готовую библиотеку можно скачать по адресу http://android-graphview.org/. Также есть страница на Гитхабе с открытыми исходниками.

Работаем с библиотекой

Скопируем библиотеку в папку libs вашего проекта.

Подключение происходит следующим образом. Вы создаёте макет экрана на основе LinearLayout и программно подключаете нужный класс к данному контейнеру.

Разметка:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

</LinearLayout>

Осталось написать код для активности. Нужно указать данные для графика, а компонент постарается автоматически вычислить доступный ему размер и пропорционально разместить данные для сетки, а затем нарисует график. Начнём с линейной графики.


package ru.alexanderklimov.test;

import com.jjoe64.graphview.BarGraphView;
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.GraphViewSeries;
import com.jjoe64.graphview.GraphView.GraphViewData;
import com.jjoe64.graphview.LineGraphView;

import android.app.Activity;
import android.os.Bundle;

import android.view.Menu;
import android.view.View;

import android.widget.LinearLayout;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		// Линейный график
		GraphViewSeries exampleSeries = new GraphViewSeries(
				new GraphViewData[] { new GraphViewData(1, 3.0d),
						new GraphViewData(2, 1.5d), new GraphViewData(3, 2.5d),
						new GraphViewData(4, 1.0d), new GraphViewData(5, 1.3d) });

		GraphView graphView = new LineGraphView(this, "График каких-то данных");
		graphView.addSeries(exampleSeries);

		LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
		layout.addView(graphView);

	}
}

Результат

GraphView

Чтобы линейный график заменить на гистрограмму (или как он там называется?), то нужно заменить класс LineGraphView на BarGraphView:


GraphViewSeries exampleSeries = new GraphViewSeries(
		new GraphViewData[] { new GraphViewData(1, 3),
				new GraphViewData(2, 6), new GraphViewData(3, 6),
				new GraphViewData(4, 5), new GraphViewData(5, 1)
		});
GraphView graphView = new BarGraphView(this,
		"Число пойманных мышек за неделю");
graphView.addSeries(exampleSeries);
LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
layout.addView(graphView);

GraphView

На графике видно, что понедельник - день тяжёлый и кот поймал только три мышки. Потом обычные трудовые будни, в пятницу кот уже ждёт предстоящих выходных и работает спустя рукава. Ну а в субботу и воскресенье он отказывается работать, ссылаясь на трудовой кодекс и угрожая пожаловаться в Общество защиты животных. Бездельник!

Также существуют различные методы для управления стилями: цветом, размерами и т.п. Примеры можно посмотреть на сайте автора.

Реклама