# 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/ -  -  -  -  -  #### 项目介绍 - 编程语言：Java - 外部库依赖：无 #### 安装教程 1. 下载组件har包ChatLib.har。 2. 启动 DevEco Studio，将下载的jar包，导入工程目录“entry->libs”下。  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)授权许可.