1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/isrc_ohos-mp-chart_ohos

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

MPChart_ohos

Данный проект основан на открытом проекте 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/.

    Изображения

Изображение Описание
sample1.PNG
sample2.PNG
sample3.PNG
sample4.PNG
sample5.PNG

Технические характеристики

  • Язык программирования: Java.

  • Внешние библиотеки: отсутствуют.

Инструкция по установке

  1. Скачайте компонент har-пакет ChatLib.har.
  2. Запустите DevEco Studio и импортируйте скачанный jar-файл в каталог проекта «entry->libs».
  3. В файле build.gradle уровня модуля добавьте зависимость, указав ссылку на jar-файл из каталога libs, а затем выполните gradle sync.
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
    
}

В версии SDK 5 и DevEco Studio 2.1 beta 3 проект можно запустить напрямую. Если запуск не удался, удалите файлы .gradle, .idea, build, gradle и build.gradle из проекта и создайте новый проект с вашей версией. Скопируйте соответствующие файлы из нового проекта в корневой каталог.

Руководство по использованию (можно обратиться к модулю entry в этом проекте)

1. Построение линейного графика

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);

Версия итерации

  • v0.1.0-alpha

Реализованы функции построения линейных диаграмм и гистограмм, другие типы диаграмм пока не поддерживаются.

Пока не поддерживается управление жестами на графиках.

Анимационные эффекты пока недоступны.

  • v0.2.0-alpha

Реализована функция построения линейных, гистограммных, круговых, радарных и пузырьковых диаграмм.

Поддерживается частичное взаимодействие с кликами.

Анимационные эффекты пока недоступны.

Информация об авторских правах и лицензиях

MPChart_ohos лицензирован под Apache License, version 2.0.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

На основе открытого исходного кода проекта MPAndroidChart выполнена адаптация и разработка для HarmonyOS, поддерживается построение графиков различных типов данных. Развернуть Свернуть
Apache-2.0
Отмена

Обновления (2)

все

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/isrc_ohos-mp-chart_ohos.git
git@api.gitlife.ru:oschina-mirror/isrc_ohos-mp-chart_ohos.git
oschina-mirror
isrc_ohos-mp-chart_ohos
isrc_ohos-mp-chart_ohos
master