本项目是基于开源项目MPAndroidChart进行鸿蒙化的移植和开发的,可以通过项目标签以及github地址( https://github.com/PhilJay/MPAndroidChart )追踪到原安卓项目版本
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
……
}
在sdk5,DevEco Studio2.1 beta3下项目可直接运行 如无法运行,删除项目.gradle,.idea,build,gradle,build.gradle文件, 并依据自己的版本创建新项目,将新项目的对应文件复制到根目录下
1.1 定义chart并根据id绑定组件
//初始化Chart
private LineChart chart;
chart = findComponentById(ResourceTable.Id_lineChart);
1.2 按自己的需求为LineChart添加属性,例如:
//设置背景颜色
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类实例。
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上了。
Component.DrawTask drawTask = new Component.DrawTask() {
@Override
public void onDraw(Component component, Canvas canvas) {
chart.onDraw(canvas);
}
};
chart.addDrawTask(drawTask);
与折线图绘制流程类似,感兴趣的可以参考entry模块中的BarChartAbility。部分属性如下:
// 设置数据值和数据标签
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);
与折线图绘制流程类似,感兴趣的可以参考entry模块中的PieChartAbility。部分属性如下:
// 设置数据值和数据标签
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");
与折线图绘制流程类似,感兴趣的可以参考entry模块中的RadarChartAbility。部分属性如下:
// 设置数据值和数据标签
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);
与折线图绘制流程类似,感兴趣的可以参考entry模块中的BubbleChartAbility。部分属性如下:
// 设置数据值和数据标签
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授权许可.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
Activity
Community
Health
Trend
Influence
:Code submit frequency
:React/respond to issue & PR etc.
:Well-balanced team members and collaboration
:Recent popularity of project
:Star counts, download counts etc.