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

jacksky
发布于 2022-2-8 17:59
浏览
2收藏

MPChart_ohos

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

项目介绍

项目介绍

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

安装教程

  1. 下载组件har包ChatLib.har。
  2. 启动 DevEco Studio,将下载的jar包,导入工程目录“entry->libs”下。鸿蒙开源组件——数据图绘制-鸿蒙开发者社区
  3. 在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);

 

2.直方图绘制

与折线图绘制流程类似,感兴趣的可以参考entry模块中的BarChartExample。

版本迭代

  • v0.1.0-alpha

    实现了折线图、直方图的绘制功能,尚不支持其它图的绘制。

    尚不支持对图表的手势操控

    尚不支持动画效果

版权和许可信息

MPChart_ohos经过Apache License, version 2.0授权许可.

mp-chart_ohos-master.zip 3.7M 20次下载
已于2022-2-8 17:59:27修改
3
收藏 2
回复
举报
1条回复
按时间正序
/
按时间倒序
mb6235788a148b1
mb6235788a148b1

你好,请问哪里能下载组件har包ChatLib.har

回复
2022-3-19 23:21:49
回复
    相关推荐