Статьи

Учебник по диаграмме Android: AChartEngine

Январь 7, 2019

В этом посте я опишу, как использовать AchartEngine . Это отличная библиотека для Android, которая поможет вам создавать диаграммы. Он поддерживает несколько типов диаграмм, просто назвать несколько:

  • линейный график
  • диаграмма местности
  • гистограмма
  • круговая диаграмма
  • комбинированный график

и так далее.

Эта библиотека помогает вам во всех аспектах при создании диаграмм, поэтому вам не нужно больше ничего для создания интересных диаграмм.

Начиная

Если вы используете Android Studio, вы можете загрузить непосредственно банку со всеми классами и добавить ее в свой проект. Когда загрузка будет завершена, вы должны добавить библиотеку в папку libs, чтобы я мог автоматически включиться в ваш проект. Теперь вы готовы использовать библиотеку!

Когда вы создаете диаграммы, вам обычно нужен набор данных, которые должны быть нарисованы на диаграмме, в этом случае, чтобы иметь реальные значения и не изобретать колесо, мы можем предположить, что мы получим эти значения с помощью WeatherLib, чтобы мы могли построить график атмосферные параметры (как температура и давление ..).

За этой библиотекой стоят некоторые основные понятия, и они важны для того, чтобы вы могли использовать ее:

  • Набор данных (набор данных, которые вы должны нарисовать на графике)
  • Представление (или тип диаграммы, которую вы хотите)
  • Рендерер (Он управляет отображением представления, устанавливает некоторые параметры, которые вы можете изменить, как выглядят диаграммы. Существует два типа рендерера: один управляет рендерингом набора данных, а другой — как выглядят основные аспекты диаграммы. (т.е. ось, метки и т. д.)
  • Фабрика диаграмм (объединяет набор данных и средства визуализации для создания диаграмм. Диаграмма может быть создана внутри действия или фабрика может вернуть представление.)

Линейный график

В качестве первого примера мы хотим создать линейный график. На этом графике мы нарисуем температуру, которая является нашим набором данных. Учитывая, что линейная диаграмма является XY-диаграммой, мы в качестве первого шага создадим правильный ряд, содержащий данные:

1
XYSeries series = new XYSeries("London Temperature hourly");

Затем мы должны заполнить ряд, используя данные, полученные из WeatherLib (почасовой прогноз погоды):

1
2
3
4
int hour = 0;
for (HourForecast hf : nextHourForecast) {
    series.add(hour++, hf.weather.temperature.getTemp());
}

почти готово, серия содержит данные. Если вы посмотрите внимательно, мы представили на оси X часы и на оси Y температуру.

Вспоминая основные концепции, описанные выше, мы должны создать рендерер серии:

1
2
3
4
5
6
7
8
9
// Now we create the renderer
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setLineWidth(2);
renderer.setColor(Color.RED);
// Include low and max value
renderer.setDisplayBoundingPoints(true);
// we add point markers
renderer.setPointStyle(PointStyle.CIRCLE);
renderer.setPointStrokeWidth(3);

В строке 3 мы устанавливаем ширину линии. При использовании achartengine следует учитывать один аспект: размеры выражаются в пикселях, а не в dp !. В строке 4 мы устанавливаем цвет, а затем в строке 8 мы устанавливаем стиль точек, то есть точку, содержащуюся в нашей серии.

Последний шаг — создание средства визуализации, которое контролирует полные диаграммы и добавляет по одному представлению для каждой серии:

1
2
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
mRenderer.addSeriesRenderer(renderer);

а потом:

1
2
3
4
5
6
7
// We want to avoid black border
mRenderer.setMarginsColor(Color.argb(0x00, 0xff, 0x00, 0x00)); // transparent margins
// Disable Pan on two axis
mRenderer.setPanEnabled(false, false);
mRenderer.setYAxisMax(35);
mRenderer.setYAxisMin(0);
mRenderer.setShowGrid(true); // we show the grid

Небольшой совет: если вы создадите диаграмму, вы заметите, что вокруг диаграммы есть черные границы, если вы хотите удалить их, вы должны установить прозрачность этого поля (строка 2). В строке 5,6 мы устанавливаем диапазон значений Y.

Последний шаг — создание представления:

1
GraphicalView chartView = ChartFactory.getLineChartView(getActivity(), dataset, mRenderer);

Теперь у нас есть представление, что последний шаг добавляет его в наш макет. Предположим, у нас есть линейное расположение:

1
2
3
4
5
<LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/chart"
       android:orientation="vertical"/>

Мы добавляем вид к нему:

1
chartLyt.addView(chartView,0);

Запустив пример, который мы имеем в конце:

android_temperature [4]

Гистограмма

Гистограмма — это другой тип диаграмм, который можно построить с помощью AchartEngine. В этом случае мы можем предположить, что хотим построить график значений давления, полученных из WeatherLib. Как мы делали раньше, нам нужно создать ряд данных:

1
2
3
4
5
6
for (HourForecast hf : nextHourForecast) {
    series.add(hour++, hf.weather.currentCondition.getPressure());
 
    if (hour > 24)
        break;
}

Некоторые шаги очень похожи на те, что объяснялись ранее, поэтому мы можем спокойно перейти к ним и создать диаграмму:

1
GraphicalView chartView = ChartFactory.getBarChartView(getActivity(), dataset, mRenderer, BarChart.Type.DEFAULT);

В результате получаем:

android_pressure [4]

Диапазон бар

Диапазон представляет собой особый тип гистограммы, и он интересен тем, что использует другой тип рядов данных. Range Range — это бар с нижним и верхним пределом. Мы можем использовать этот тип графика, если мы хотим построить максимальную и минимальную температуру.

1
RangeCategorySeries series = new RangeCategorySeries("London next days temperature");

Теперь добавим значения:

1
2
3
4
for (DayForecast df : dayForecast) {
    series.add(df.forecastTemp.min, df.forecastTemp.max);
    mRenderer.addXTextLabel(hour++, sdf.format(df.timestamp));
}

В строке 2 мы устанавливаем минимальную и максимальную температуру, добавляя их в ряд данных. В строке 3 мы добавляем метку к значениям оси X. В этом случае мы используем номер дня и месяц:

1
SimpleDateFormat sdf = new SimpleDateFormat("dd,MMM");

Теперь добавим серию:

1
2
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
dataset.addSeries(series.toXYSeries());

и создайте рендерер серии:

1
2
3
4
5
6
7
8
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setDisplayChartValues(true);
mRenderer.addSeriesRenderer(renderer);
mRenderer.setYAxisMax(30.0);
mRenderer.setYAxisMin(0.0);
renderer.setChartValuesTextSize(12);
renderer.setChartValuesFormat(new DecimalFormat("#.##"));
renderer.setColor(Color.GREEN);

Некоторые аспекты, на которые следует обратить внимание: в строке 2 мы сообщаем визуализатору, что мы хотим, чтобы значения отображались на диаграмме, а в строке 6 мы устанавливаем размер текста. Еще один важный аспект: формат значения: в строке 7 мы указываем, что мы хотим две цифры после десятичной точки. Наконец, мы можем создать график:

1
GraphicalView chartView = ChartFactory.getRangeBarChartView(getActivity(), dataset, mRenderer, BarChart.Type.DEFAULT);

Запустив пример, который мы имеем:

android_maxmin_temp [4]

  • Исходный код скоро будет доступен.
Ссылка: Учебник по Android-графику: AChartEngine от нашего партнера по JCG Франческо Аццолы из блога Surviving с Android .
52
Share: