鸿蒙开源组件——创建精美图表库

jacksky

发布于 2022-1-11 17:08

3.4w浏览

0收藏

该三方开源库从github fork过来，主要将底层接口调用的实现修改成鸿蒙接口的实现，将三方库鸿蒙化，供开发鸿蒙应用的开发者使用

fork地址：https://github.com/blackfizz/EazeGraph

fork版本号/日期：master / 2015/10/5

EazeGraph

EazeGraph是一个用于创建精美图表库。它的主要目标是创建一个轻量级的库，该库易于使用并且高度可定制，具有“最新”外观。

原项目Readme地址：https://github.com/blackfizz/EazeGraph/blob/master/README.md

项目移植状态：支持组件所有基本功能

完成度：100%

调用差异：无

导入方法

har导入

将har包放入lib文件夹并在build.gradle添加

implementation fileTree(dir: 'libs', include: ['*.har'])1.

Library引用

添加本工程中的模块到任意工程中，在需要使用的模块build.gradle中添加

compile project(path: ':EazeGraphLibrary')1.

allprojects{
    repositories{
        mavenCentral()
    }
}
implementation 'io.openharmony.tpc.thirdlib:EazeGraph:1.0.2'1.
2.
3.
4.
5.
6.

使用方法

Bar Chart

XML

<BarChart
            ohos:id="$+id:barchart"
            ohos:height="256vp"
            ohos:width="match_parent"
            ohos:egBarWidth="20vp"
            ohos:egFixedBarWidth="true"
            ohos:egLegendHeight="0vp"
            ohos:egShowDecimal="true"
            ohos:egShowValues="true"
            ohos:padding="10vp"/>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Java

mBarChart = (BarChart) findComponentById(ResourceTable.Id_barchart);

mBarChart.addBar(new BarModel(2.3f, 0xFF123456));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(3.3f, 0xFF563456));
mBarChart.addBar(new BarModel(1.1f, 0xFF873F56));
mBarChart.addBar(new BarModel(2.7f, 0xFF56B7F1));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(0.4f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(1.0f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(0.5f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(4.f, 0xFF1BA4E6));
mBarChart.addBar(new BarModel(2.3f, 0xFF123456));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(3.3f, 0xFF563456));
mBarChart.addBar(new BarModel(1.1f, 0xFF873F56));
mBarChart.addBar(new BarModel(2.7f, 0xFF56B7F1));
mBarChart.addBar(new BarModel(2.f, 0xFF343456));
mBarChart.addBar(new BarModel(0.4f, 0xFF1FF4AC));
mBarChart.addBar(new BarModel(4.f, 0xFF1BA4E6));

mBarChart.startAnimation();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

Stacked Bar Chart

XML

<StackedBarChart
        ohos:id="$+id:stackedbarchart"
        ohos:height="256vp"
        ohos:width="match_parent"
        ohos:egBarWidth="20vp"
        ohos:egEnableScroll="false"
        ohos:egFixedBarWidth="true"
        ohos:egLegendHeight="40vp"
        ohos:egShowSeparators="true"
        ohos:egShowValues="true"
        ohos:padding="10vp"/>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Java

StackedBarModel s1 = new StackedBarModel("12.4");

s1.addBar(new BarModel(2.3f, 0xFF63CBB0));
s1.addBar(new BarModel(2.3f, 0xFF56B7F1));
s1.addBar(new BarModel(2.3f, 0xFFCDA67F));

StackedBarModel s2 = new StackedBarModel("13.4");
s2.addBar(new BarModel(1.1f, 0xFF63CBB0));
s2.addBar(new BarModel(2.7f, 0xFF56B7F1));
s2.addBar(new BarModel(0.7f, 0xFFCDA67F));

StackedBarModel s3 = new StackedBarModel("14.4");

s3.addBar(new BarModel(2.3f, 0xFF63CBB0));
s3.addBar(new BarModel(2.f, 0xFF56B7F1));
s3.addBar(new BarModel(3.3f, 0xFFCDA67F));

StackedBarModel s4 = new StackedBarModel("15.4");
s4.addBar(new BarModel(1.f, 0xFF63CBB0));
s4.addBar(new BarModel(4.2f, 0xFF56B7F1));
s4.addBar(new BarModel(2.1f, 0xFFCDA67F));

StackedBarModel s5 = new StackedBarModel("16.4");

s5.addBar(new BarModel(32.3f, 0xFF63CBB0));
s5.addBar(new BarModel(12.f, 0xFF56B7F1));
s5.addBar(new BarModel(22.3f, 0xFFCDA67F));

StackedBarModel s6 = new StackedBarModel("17.4");
s6.addBar(new BarModel(3.f, 0xFF63CBB0));
s6.addBar(new BarModel(.7f, 0xFF56B7F1));
s6.addBar(new BarModel(1.7f, 0xFFCDA67F));

StackedBarModel s7 = new StackedBarModel("18.4");

s7.addBar(new BarModel(2.3f, 0xFF63CBB0));
s7.addBar(new BarModel(2.f, 0xFF56B7F1));
s7.addBar(new BarModel(3.3f, 0xFFCDA67F));

StackedBarModel s8 = new StackedBarModel("19.4");
s8.addBar(new BarModel(5.4f, 0xFF63CBB0));
s8.addBar(new BarModel(2.7f, 0xFF56B7F1));
s8.addBar(new BarModel(3.4f, 0xFFCDA67F));

mStackedBarChart.addBar(s1);
mStackedBarChart.addBar(s2);
mStackedBarChart.addBar(s3);
mStackedBarChart.addBar(s4);
mStackedBarChart.addBar(s5);
mStackedBarChart.addBar(s6);
mStackedBarChart.addBar(s7);
mStackedBarChart.addBar(s8);

mStackedBarChart.startAnimation();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

PieChart

XML

 <PieChart
         ohos:id="$+id:piechart"
         ohos:height="300vp"
         ohos:width="match_parent"
         ohos:egAutoCenter="true"
         ohos:egInnerValueUnit="%"
         ohos:egLegendTextSize="18fp"
         ohos:egOpenClockwise="false"
         ohos:egUsePieRotation="true"
         ohos:egValueTextSize="36fp"
         ohos:padding="10vp"/>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Java

mPieChart = (PieChart) findComponentById(ResourceTable.Id_piechart);

mPieChart.addPieSlice(new PieModel("Freetime", 15, Color.getIntColor("#FE6DA8")));
mPieChart.addPieSlice(new PieModel("Sleep", 25, Color.getIntColor("#56B7F1")));
mPieChart.addPieSlice(new PieModel("Work", 35, Color.getIntColor("#CDA67F")));
mPieChart.addPieSlice(new PieModel("Eating", 9, Color.getIntColor("#FED70E")));

mPieChart.startAnimation();1.
2.
3.
4.
5.
6.
7.
8.

Line Chart

XML

<ValueLineChart
        ohos:id="$+id:linechart"
        ohos:height="200vp"
        ohos:width="match_parent"
        ohos:egActivateIndicatorShadow="false"
        ohos:egCurveSmoothness="0.4"
        ohos:egIndicatorLineColor="#FE6DA8"
        ohos:egIndicatorTextColor="#FE6DA8"
        ohos:egIndicatorTextUnit="g"
        ohos:egLegendHeight="40vp"
        ohos:egUseCubic="false"
        ohos:egUseDynamicScaling="false"
        ohos:egUseOverlapFill="true"/>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Java

mValueLineChart = (ValueLineChart) findComponentById(ResourceTable.Id_linechart);
loadData();

ValueLineSeries series = new ValueLineSeries();
series.setColor(0xFF63CBB0);

series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.4f));
series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(4.4f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.2f));
series.addPoint(new ValueLinePoint(2.6f));
series.addPoint(new ValueLinePoint(5.0f));
series.addPoint(new ValueLinePoint(3.5f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(0.4f));
series.addPoint(new ValueLinePoint(3.4f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(4.2f));
series.addPoint(new ValueLinePoint(2.4f));
series.addPoint(new ValueLinePoint(3.6f));
series.addPoint(new ValueLinePoint(1.0f));
series.addPoint(new ValueLinePoint(2.5f));
series.addPoint(new ValueLinePoint(2.0f));
series.addPoint(new ValueLinePoint(1.4f));


mValueLineChart.addSeries(series);
mValueLineChart.startAnimation();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

一些功能设置介绍

BarChart功能介绍

添加图表数据 mBarChart.addBar();
添加图表数据 mBarChart.addBarList();

PieChart功能介绍

添加数据 mPieChart.addPieSlice(PieModel slice);
获取当前选中的item mPieChart.getCurrentItem();.
设置选中的item mPieChart.setCurrentItem();

ValueLineChart功能介绍

添加图表数据 mValueLineChart.addSeries();
获取图表数据 mValueLineChart.getDataSeries();

StackedBarChart功能介绍

添加图表数据 mBarChart.addBar();
添加图表数据 mBarChart.addBarList();

BaseChart功能介绍

设置说明文字的颜色 mBarChart.setLegendColor();
设置说明文字的高度 mBarChart.setLegendHeight();
设置说明文字的字号 mBarChart.setLegendTextSize();
设置动画的时间 mBarChart.setAnimationTime();
设置文本 mBarChart.setEmptyDataText();
获取是否将显示的提示转化为int类型 mBarChart.isShowDecimal();
设置是否将显示的提示转化为int类型 mBarChart.setShowDecimal();
获取图表的数据 mBarChart.getData();
清除图表数据 mBarChart.clearChart();
获取动画的时间 mBarChart.getAnimationTime();
获取图表的条目间隔距离 mBarChart.getBarMargin();
获取文字 mBarChart.getEmptyDataText();
获取提示文字的颜色 mBarChart.getLegendColor();
获取提示文字的高度 mBarChart.getLegendHeight();.
获取提示文字的字体大小 mBarChart.getLegendTextSize();

BaseBarChart功能介绍

设置每页显示的柱状个数 mBarChart.setVisibleBars();
设置柱状图的边距 mBarChart.setBarMargin();
设置柱状图每个条目的宽度 mBarChart.setBarWidth();
获取图表的宽度 mBarChart.getBarWidth();
获取图表的监听 mBarChart.getOnBarClickedListener();
获取显示的条目个数 mBarChart.getVisibleBars();
设置是否修复图表条目的宽度 mBarChart.setFixedBarWidth();
设置图表的监听 mBarChart.setOnBarClickedListener();
设置是否滚动 mBarChart.setScrollEnabled();
设置滚动到最后 mBarChart.setScrollToEnd();
设置是否显示值 mBarChart.setShowValues();

分类

标签

EazeGraph-master.zip 4.52M 29次下载

已于2022-1-11 17:08:22修改

51CTO

51CTO博客

51CTO学堂

鸿蒙开源组件——创建精美图表库

EazeGraph

导入方法

使用方法

Bar Chart

XML

Java

Stacked Bar Chart

XML

Java

PieChart

XML

Java

Line Chart

XML

Java

一些功能设置介绍

目录

订阅鸿蒙技术特刊，精选内容抢先看