Данный проект основан на открытом проекте MPAndroidChart и представляет собой его адаптацию для использования в операционной системе Hongmeng. С исходным проектом Android можно ознакомиться по адресу: https://github.com/PhilJay/MPAndroidChart.
Название проекта: открытый компонент для создания графиков.
Серия: адаптация сторонних компонентов для Hongmeng OS.
Функции: поддержка различных типов данных для построения графиков (в настоящее время поддерживаются линейные графики и гистограммы).
Состояние переноса: базовая функциональность реализована, часть API реализована.
Различия в вызовах: отсутствуют.
Версия разработки: SDK 5, DevEco studio 3.0 Beta 2.
Автор проекта: У Шэннань.
Контакты: isrc_hm@iscas.ac.cn.
Адрес исходного документа: https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/.
Изображение | Описание |
---|---|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
Язык программирования: Java.
Внешние библиотеки: отсутствуют.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
…
}
В версии SDK 5 и DevEco Studio 2.1 beta 3 проект можно запустить напрямую. Если запуск не удался, удалите файлы .gradle, .idea, build, gradle и build.gradle из проекта и создайте новый проект с вашей версией. Скопируйте соответствующие файлы из нового проекта в корневой каталог.
1.1 Определите chart и привяжите компонент к id.
// Инициализация Chart
private LineChart chart;
chart = findComponentById(ResourceTable.Id_lineChart);
1.2 Добавьте атрибуты в соответствии с вашими потребностями для LineChart, например:
// Установка цвета фона
ShapeElement background= new ShapeElement();
background.setShape(ShapeElement.RECTANGLE);
background.setRgbColor(new RgbColor(255,255,255));
chart.setBackground(background);
// Отключение подробной информации
chart.getDescription().setEnabled(false);
// Настройка вспомогательных линий сетки над графиками
chart.setDrawGridBackground(false);
// Ось X
XAxis xAxis = chart.getXAxis();
xAxis.setEnabled(true);
// Ось Y
chart.getAxisRight().setEnabled(false); // Отключить правую ось Y
YAxis yAxis = chart.getAxisLeft();
yAxis.setAxisMaximum(200f); // Установить максимальное значение оси Y
yAxis.setAxisMinimum(-50f); // Установить минимальное значение оси Y
yAxis.setDrawLabels(true); // Включить отображение меток данных
// Вспомогательные линии
LimitLine ll1 = new LimitLine(150f, "Upper Limit");
ll1.setLineWidth(2f);
ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);
ll1.setTextSize(10f);
ll1.setFont(Font.DEFAULT);
yAxis.addLimitLine(ll1);
// Легенда
Legend l = chart.getLegend();
l.setForm(Legend.LegendForm.LINE);
1.4 Импортируйте данные, которые вы хотите построить, и преобразуйте их в экземпляр класса LineData, который требуется для линейного графика.
ArrayList<Entry> values = new ArrayList<>();
// Случайное число
for (int i = 0; i < count; i++) {
float val = (float) (Math.random() * range) - 30;
values.add(new Entry(i, val));
}
// Установить значения данных и метки данных
LineDataSet set1 = new LineDataSet(values, "DataSet 1");
// Включить ли рисование значков
set1.setDrawIcons(false);
// Цвет линии тренда
set1.setColor(Color.BLACK.getValue());
// Цвет точки поворота
set1.setCircleColor(Color.BLACK.getValue());
// Ширина линии тренда
set1.setLineWidth(1f);
// Радиус точки поворота
set1.setCircleRadius(3f);
// Является ли точка поворота пустой
set1.setDrawCircleHole(false);
// Толщина линии легенды
set1.setFormLineWidth(1f);
// Размер шрифта легенды
set1.setFormSize(15.f);
// Размер шрифта данных
set1.setValueTextSize(9f);
// Заполнить цвет ниже
set1.setDrawFilled(true);
set1.setFillFormatter(new IFillFormatter() {
@Override
public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
return chart.getAxisLeft().getAxisMinimum();
}
});
set1.setFillColor(Color.BLACK.getValue());
// Создать экземпляр ILineDataset
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(set1);
// Создать линейный объект данных
LineData data = new LineData(dataSets);
// Установить данные
chart.setData(data);
1.5 Создайте экземпляр drawTask для рисования задачи и передайте его canvas в экземпляр LineChart для выполнения задачи рисования, чтобы линейный график был нарисован на этом canvas.
Component.DrawTask drawTask = new Component.DrawTask() {
@Override
public void onDraw(Component component, Canvas canvas) {
// Рисование графика
}
};
``` **1. Построение гистограммы**
Процесс построения гистограммы аналогичен построению линейчатой диаграммы. Заинтересованные могут обратиться к BarChartAbility в модуле entry. Часть свойств:
```java
// Устанавливаем значения данных и метки данных
BarDataset set1 = new BarDataset(values, "Dataset 1");
// Устанавливаем цвет заполнения данных
set1.setColors(ColorTemplate.VORDIPLOM_COLORS);
// Устанавливаем цвет внешней рамки данных
set1.setBarBorderColor(ColorTemplate.COLORFUL_COLORS[0]);
// Устанавливаем цвет тени данных
set1.setBarShadowColor(ColorTemplate.COLORFUL_COLORS[1]);
// Устанавливаем градиент цвета заполнения данных
set1.setGradientColor(ColorTemplate.COLORFUL_COLORS[0], ColorTemplate.COLORFUL_COLORS[1]);
// Определяем, показывать ли метки данных
set1.setDrawValues(false);
// Устанавливаем ширину внешней рамки данных
set1.setBarBorderWidth(1.0f);
2. Построение линейчатой диаграммы
Процесс построения линейчатой диаграммы аналогичен процессу построения гистограммы. Заинтересованные могут обратиться к BarChartAbility в модуле entry. Часть свойств:
// Устанавливаем значения данных и метки данных
PieDataSet dataSet = new PieDataSet(values, «Election Results»);
// Определяем, рисовать ли пользовательские значки
dataSet.setDrawIcons(false);
// Устанавливаем интервал между лепестками
dataSet.setSliceSpace(3f);
// Устанавливаем смещение после выбора
dataSet.setSelectionShift(5f);
// Устанавливаем цвета лепестков
dataSet.setColors(ColorTemplate.PASTEL_COLORS);
// Определяем, отображать ли метки данных
dataSet.setDrawValues(true);
// Устанавливаем цвет линии соединения меток данных
dataSet.setValueLineColor(ColorTemple.COLORFUL_COLORS[0]);
// Устанавливаем ширину линии соединения меток данных
dataSet.setValueLineWidth(1.0f);
// Устанавливаем длину первой части линии соединения меток данных
dataSet.setValueLinePart1Length(10.0f);
// Устанавливаем длину второй части линии соединения меток данных
dataSet.setValueLinePart2Length(12.0f);
// Устанавливаем процент смещения первой части линии соединения меток данных
dataSet.setValueLinePart1OffsetPercentage(50.0f);
// Стиль настройки //
// Включаем рисование отверстия в центре
chart.setDrawHoleEnable(true);
// Цвет отверстия
chart.setHoleColor(Color.WHITE.getValue());
// Радиус отверстия
chart.setHoleRadius(35f);
// Полупрозрачный цвет окружности
chart.setTransparentCircleColor(Color.WHITE.getValue());
// Прозрачность полупрозрачной окружности
chart.setTransparentCircleAlpha(110);
// Радиус полупрозрачной окружности
chart.setTransparentCircleRadius(42f);
// Отображение центрального текста
chart.setDrawCenterText(true);
// Центральный текст
chart.setCenterText("PieChart");
3. Построение круговой диаграммы
Процесс построения круговой диаграммы аналогичен процессу построения линейчатой диаграммы. Заинтересованные могут обратиться к PieChartAbility в модуле entry. Часть свойств:
// Устанавливаем значения данных и метки данных
RadarDataSet set1 = new RadarDataSet(entries1, «Last Week»);
// Устанавливаем цвет контура
set1.setColor(Color.rgb(103, 110, 129));
// Устанавливаем цвет заливки
set1.setFillColor(Color.rgb(103, 110, 129));
// Определяем, заливать ли цветом
set1.setDrawFill(true);
// Прозрачный цвет заливки
set1.setFillAlpha(180);
// Ширина контура
set1.setLineWidth(2f);
4. Построение радарной диаграммы
Процесс построения радарной диаграммы аналогичен процессу построения линейчатой диаграммы. Заинтересованные могут обратиться к RadarChartAbility в модуле entry. Часть свойств:
// Устанавливаем значения данных и метки данных
BubbleDataSet set1 = new BubbleDataSet(values1, «DS 1»);
// Определяем, рисовать ли пользовательские иконки
set1.setDrawIcons(false);
// Заполняем цвет пузырьков
set1.setColor(ColorTemplate.COLORFUL_COLORS[0], 130);
// Определяем, отображать ли метки данных
set1.setDrawValues(false);
Реализованы функции построения линейных диаграмм и гистограмм, другие типы диаграмм пока не поддерживаются.
Пока не поддерживается управление жестами на графиках.
Анимационные эффекты пока недоступны.
Реализована функция построения линейных, гистограммных, круговых, радарных и пузырьковых диаграмм.
Поддерживается частичное взаимодействие с кликами.
Анимационные эффекты пока недоступны.
MPChart_ohos лицензирован под Apache License, version 2.0.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )