MPChart_ohos: 基于开源项目MPAndroidChart进行鸿蒙化的移植和开发的，支持各种类型的数据图绘制

# MPChart_ohos

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

#### 项目介绍

- 项目名称：开源图表绘制组件
  - 所属系列：鸿蒙的第三方组件适配移植
  - 功能：支持各种类型的数据图绘制（目前支持折线图和直方图）
  - 项目移植状态：基本功能实现,部分API实现
  - 调用差异：无
  - 开发版本：sdk5，DevEco studio 3.0 Beta 2
  - 项目发起作者：吴圣垚
  - 联系方式：isrc_hm@iscas.ac.cn
  - 原项目Doc地址：https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/
  - ![输入图片说明](https://gitee.com/isrc_ohos/mp-chart_ohos/raw/master/Pic/sample1.PNG "sample1.PNG")
  - ![输入图片说明](https://gitee.com/isrc_ohos/mp-chart_ohos/raw/master/Pic/sample2.PNG "sample2.PNG")
  - ![输入图片说明](https://gitee.com/isrc_ohos/mp-chart_ohos/raw/master/Pic/sample3.png "sample3.PNG")
  - ![输入图片说明](https://gitee.com/isrc_ohos/mp-chart_ohos/raw/master/Pic/sample4.png "sample4.PNG")
  - ![输入图片说明](https://gitee.com/isrc_ohos/mp-chart_ohos/raw/master/Pic/sample5.png "sample5.PNG")

#### 项目介绍

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

#### 安装教程

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

![输入图片说明](https://images.gitee.com/uploads/images/2021/0303/175728_e29e9283_8496150.png "1.PNG")

3. 在moudle级别下的build.gradle文件中添加依赖，在dependences字段中增加对libs目录下jar包的引用，然后执行gradle sync。
  ```groovy
  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绑定组件

```java
  //初始化Chart
  private LineChart chart;
  chart = findComponentById(ResourceTable.Id_lineChart);
  ```
  1.2 按自己的需求为LineChart添加属性，例如：

```java
  //设置背景颜色
  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类实例。

```java
  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上了。

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

##### 2.直方图绘制

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

```java
  // 设置数据值和数据标签
  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。部分属性如下：

```java
  // 设置数据值和数据标签
  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。部分属性如下：

```java
  // 设置数据值和数据标签
  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。部分属性如下：

```java
  // 设置数据值和数据标签
  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](http://www.apache.org/licenses/LICENSE-2.0)授权许可.

ISRC_OHOS / MPChart_ohos

About

Releases (2)

Contributors

Language(Optional)

Activities

ISRC_OHOS / MPChart_ohos .gitee-modal { width: 500px !important; }