2 Star 24 Fork 0

ISRC_OHOS / MPChart_ohos

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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授权许可.

空文件

简介

基于开源项目MPAndroidChart进行鸿蒙化的移植和开发的,支持各种类型的数据图绘制 展开 收起
Java
取消

发行版 (2)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
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

搜索帮助