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

OSCHINA-MIRROR/isrc_ohos-mp-chart_ohos

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать

A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

Permissions
  • Commercial use
  • Modification
  • Distribution
  • Patent use
  • Private use
Limitations
  • Trademark use
  • Liability
  • Warranty
Conditions
  • License and copyright notice
  • State changes
README.md 14 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 25.11.2024 04:29 4857c3b

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 )

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

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