鸿蒙开源组件——数据图绘制

jacksky

发布于 2022-2-8 17:59

浏览

2收藏

MPChart_ohos

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

项目介绍

项目名称：开源图表绘制组件
所属系列：鸿蒙的第三方组件适配移植
功能：支持各种类型的数据图绘制（目前支持折线图和直方图）
项目移植状态：基本功能实现,部分API实现
调用差异：无
开发版本：sdk5，DevEco Studio2.1 beta3
项目作者和维护人：吴圣垚
联系方式：isrc_hm@iscas.ac.cn
原项目Doc地址：https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/

项目介绍

编程语言：Java
外部库依赖：无

安装教程

下载组件har包ChatLib.har。
启动 DevEco Studio，将下载的jar包，导入工程目录“entry->libs”下。
在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 实例化LineChart类

//初始化Chart
LineChart chart = new LineChart(this);

1.2 按自己的需求为LineChart添加属性，例如：

//设置背景颜色
chart.setBackground(element);
// 不显示详细信息
chart.getDescription().setEnabled(false);
//设置网格辅助线在图表曲线的上方
chart.setDrawGridBackground(false);

1.3 初始化轴线

// 初始化x轴
XAxis xAxis;
xAxis = chart.getXAxis();

// 初始化y轴
YAxis yAxis;
yAxis = chart.getAxisLeft();

// 不启用右y轴
chart.getAxisRight().setEnabled(false);

// 设置轴线范围
xAxis.setAxisMaximum(20f);
xAxis.setAxisMinimum(0f);
yAxis.setAxisMaximum(60f);
yAxis.setAxisMinimum(0f);

1.4 导入想要绘制的数据，将其制作成折线图所需的LineData类实例，需要注意的是LineDataSet不仅是数据的集合，同时也包含一些绘制这些数据所需要的属性。

// 此处以float数组为例：
private float[] mDataPoints = new float[]{0,2,1,5,2,7,3,9,4,5,5,10,6,18,7,8,8,3};

private ArrayList<Entry> loadExternalData(float[] dataPoints){
    int count = dataPoints.length;
    ArrayList<Entry> values = new ArrayList<>();
    for (int i = 0; i < count; i = i + 2){
        values.add(new Entry(dataPoints[i], dataPoints[i + 1]));
    }
    return values;
}

private LineData setData(ArrayList<Entry> values) {

        LineDataSet set1;

        // 实例化LineDataSet
        set1 = new LineDataSet(values, "随机数据");
        
        // 添加绘制属性
        set1.setDrawIcons(false);
        // yellow lines and black points
        set1.setColor(Color.YELLOW.getValue());
        // line thickness and point size
        set1.setLineWidth(1f);
        set1.setCircleRadius(3f);
        // draw points as solid circles
        set1.setDrawCircleHole(false);
        // customize legend entry
        set1.setFormLineWidth(1f);
        set1.setFormSize(15.f);
        // text size of values
        set1.setValueTextSize(9f);
        // set the filled area
        set1.setDrawFilled(true);
        set1.setFillFormatter(new IFillFormatter() {
            @Override
            public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) {
                return chart.getAxisLeft().getAxisMinimum();
            }
        });

        // 添加数据
        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
        // add the data sets
        dataSets.add(set1); 
        // create a data object with the data sets
        LineData data = new LineData(dataSets);
        return data;

}

ArrayList<Entry> values = loadExternalData(mDataPoints);

LineData data = setData(values);

1.5 实例化一个用于承载折线图的Component，将其canvas传入LineChart实例执行绘制任务，这样折线图就绘制在该canvas上了。

Component component = new Component(this);
Component.DrawTask drawTask = new Component.DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
        chart.onDraw(canvas, data);
    }
};

component.addDrawTask(drawTask);