2 Star 21 Fork 0

ISRC_OHOS / MPChart_ohos

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

MPChart_ohos

本项目是基于开源项目MPAndroidChart进行鸿蒙化的移植和开发的,可以通过项目标签以及github地址( https://github.com/PhilJay/MPAndroidChart )追踪到原安卓项目版本

项目介绍

项目介绍

  • 编程语言:Java
  • 外部库依赖:无

安装教程

  1. 下载组件har包ChatLib.har。
  2. 启动 DevEco Studio,将下载的jar包,导入工程目录“entry->libs”下。

输入图片说明

  1. 在moudle级别下的build.gradle文件中添加依赖,在dependences字段中增加对libs目录下jar包的引用,然后执行gradle sync。
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}

在sdk5,DevEco Studio2.1 beta3下项目可直接运行 如无法运行,删除项目.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实例
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) {
        chart.onDraw(canvas);
    }
};
chart.addDrawTask(drawTask);
2.直方图绘制

与折线图绘制流程类似,感兴趣的可以参考entry模块中的BarChartAbility。部分属性如下:

// 设置数据值和数据标签
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);
3.饼状图绘制

与折线图绘制流程类似,感兴趣的可以参考entry模块中的PieChartAbility。部分属性如下:

// 设置数据值和数据标签
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");
4.雷达图绘制

与折线图绘制流程类似,感兴趣的可以参考entry模块中的RadarChartAbility。部分属性如下:

// 设置数据值和数据标签
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);
5.泡泡图绘制

与折线图绘制流程类似,感兴趣的可以参考entry模块中的BubbleChartAbility。部分属性如下:

// 设置数据值和数据标签
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授权许可.

About

基于开源项目MPAndroidChart进行鸿蒙化的移植和开发的,支持各种类型的数据图绘制 expand collapse
Java
Cancel

Releases (2)

All

MPChart_ohos

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/isrc_ohos/mp-chart_ohos.git
git@gitee.com:isrc_ohos/mp-chart_ohos.git
isrc_ohos
mp-chart_ohos
MPChart_ohos
master

Search

10d9f8b4 4838521 8bde8327 4838521