MPAndroidChart_ohos图表绘制对比解析

本组件是基于安卓平台的图表绘制组件MPAndroidChart( https://github.com/PhilJay/MPAndroidChart)，实现了其核心功能的鸿蒙化迁移和重构。目前代码已经开源到(https://gitee.com/isrc_ohos/mpandroid-chart_ohos)，欢迎各位下载使用并提出宝贵意见!

安卓版本的MPAndroidChart在GitHub上有超过3.3万个Star和8.3k个Fork，应该说是目前使用最广，体验最佳的开源图表库。它具绘制折线图、饼图、雷达图等图表的能力，用户只需要自己写一个数据接口，即可实现各种精美数据曲线的绘制，在一定程度上满足了大部分业务的需求。

本组件是MPAndroidChart的鸿蒙化版本，名为MPAndroidChart_ohos，实现了其核心功能。

目前MPAndroidChart_ohos具有折线图和直方图两种图表绘制能力。下面将分别展示其折线图和直方图的绘制效果。

图1展示了一个由随机数据生成的折线图。MPAndroidChart_ohos继承了原版MPAndroidChart的优秀特性，提供了多种多样的用户自定义接口，例如：

(1) X、Y轴自定义。使用者可以自定义X、Y轴的位置，例如在这个sample里就绘制了左Y轴和上X轴。

(2)辅助线自定义。使用者可以选择是否显示辅助线(或格点线)，也可以自由设定辅助线的位置。

(3)图表美化。使用者可以设置图表曲线的各种属性(颜色、粗细等)，还可以对曲线包裹区域进行填充。

MPAndroidChart_ohos提供了折线图和直方图的绘制能力，使用者只需要根据自身需求选择需要使用的能力即可。

LineChart chart = new LineChart(context);  //折线图的初始化 

BarChart chart = new BarChart(context);    // 直方图的初始化 

1. 

MPAndroidChart_ohos提供了图表样式自定义的能力，使用者可以通过调用Library暴露的接口来给图表添加、修改、删除各项属性。例如使用者想要自定义轴线，可以通过实例化XAxis 类的对象，然后通过对象的各种方法实现修改X轴的颜色，设置最大值、最小值等：

XAxis xAxis = chart.getXAxis();  // 实例化 

xAxis.setAxisMaximum(20f);   //属性设置 

 xAxis.setAxisMinimum(0f); 

xAxis.setAxisLineColor(Color.BLACK.getValue()); 

1. 

除了轴线设置以外还可以在图表中加入各种辅助线，例如想要在x = 2处添加一条辅助线，可以通过实例化LimitLine 类的对象，然后通过对象的各种方法实现修改辅助线的宽度、标签位置、文本大小等：

LimitLine llXAxis = new LimitLine(2f, "辅助线:x=2");  // 实例化 

llXAxis.setLineWidth(4f);                                            //属性设置 

llXAxis.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); 

llXAxis.setTextSize(10f); 

llXAxis.setTypeface(Font.DEFAULT); 

在MPAndroidChart_ohos中，不同类型的图表有着不同的数据类，例如折线图的数据类为LineData，直方图的数据类为BarData，为什么不能仅仅通过一个简单int[]或者float[]作为数据类呢?这是因为在MPAndroidChart_ohos中数据类的作用不仅仅是承载数据，同时还需要承载一些图表相关的属性，例如曲线颜色、曲线粗细、数据点颜色、大小等，这样做的意图在后续Library分析时会讲到。

以折线图为例，导入数据的过程如下：

(1)创建LineDataSet类：

LineDataSet set1 = new LineDataSet(values, label); 

其中values是使用者想要绘制的一类数据，一般是float[]，label是这类数据的标签。

(2)将一类或者几类数据放置到一个ArrayList中

ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add(set1); 

（3）将ArrayList做成LineData数据类，并传递给chart

LineData data = new LineData(dataSets);  

chart.setData(data); 

（编辑：大连站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!