当前位置：首页 > news >正文

基于 OpenHarmony HistogramComponent 柱状图开发指南

news 2025/8/17 12:39:38

1. HistogramComponent 组件功能介绍

1.1. 功能介绍

应用开发过程，用鸿蒙提供的 Component 自定义柱状图效果。

HistogramComponent 组件可以更快速实现一个简单的柱状图功能。

HistogramComponent 对外提供数据源，修改柱状图颜色，间距的接口。

1.2. phone 模拟器上运行效果

2 . HistogramComponent 使用方法

2.1 新建工程，增加组件 Har 包依赖

在应用模块中调用 HAR，常用的添加依赖的方式包括如下两种。

方式一：依赖本地 HAR,将 histogramcomponent-debug.har 复制到 entry\libs 目录下
即可（由于 build.gradle 已经依赖的 libs 目录下的*.har，因此不需要在做修改）。

查看工程目录中 build.gradle 下的*.har 是存在。

以上操作无误之后就可以进行编码了！

3 . HistogramComponent 开发实现

3.1 . 主页面的布局文件

3.2. 主页面的 Ability 的代码

@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
bargraphview = (HistogramComponent)
findComponentById(ResourceTable.Id_bargraphview);
// 设置每组柱状图之间的间距
bargraphview.mLineSpaceWidth = 30;
final int[][] data = {{182, 89, 78, 88}, {34, 85, 16, 96}, {86, 127, 45,
41},{54, 75, 54, 12}};
final int[] colorData = {0xFF222233, 0xFFe67656,
0xFF188888,0xFF888888,0xFF888888};
final String[] textData = {"一月份", "二月份", "三月份", "四月份"};// 核心接口，填充数据，柱状图颜色
bargraphview.setBarGraphData(data, colorData, textData);
}

3.3. HistogramComponent 组件核心代码

/**
* 定义 DrawTask 对象的实例
* 这里进行具体的绘画工作
*/
private DrawTask drawTask = new DrawTask() {
@Override
public void onDraw(Component component, Canvas canvas) {
bottomHeight = heightMeasureSpec - mBottomXWidth;
if (barGraphDataList == null || barGraphDataList.length <= 0)
return;
//画柱状图
drawBarGraph(canvas);
//画 XY 轴坐标
drawXYLine(canvas);
//给 XY 轴坐标写字
drawXYText(canvas);
}
};
//画柱状图
private void drawBarGraph(Canvas canvas) {
if (barGraphDataList != null && barGraphDataList.length > 0) {
for (int i = 0; i < barGraphDataList[0].length; i++) {
float startX = mLineSpaceWidth * (i + 1) + mLineWidth *
barGraphDataList.length * i + mLeftYWidth + (10) + mLineWidth / 2;
int index = 0;
while (index < barGraphDataList.length) {
if (barGraphColorList != null && barGraphColorList.length >
index) {
mBarGraphPaint.setColor(new
Color(barGraphColorList[index]));
mBarGraphTextPaint.setColor(new
Color(barGraphColorList[index]));
} else {
mBarGraphPaint.setColor(new Color(barGraphBgColor));
mBarGraphTextPaint.setColor(new Color(barGraphBgColor));
}
float stopY = bottomHeight * 0.9f / maxHeight *
barGraphDataList[index][i];
canvas.drawLine(new Point(startX, bottomHeight), new
Point(startX, bottomHeight - stopY), mBarGraphPaint);
String text = String.valueOf(barGraphDataList[index][i]);
float textWidth = mBarGraphTextPaint.measureText(text);
canvas.drawText(mBarGraphTextPaint,text, startX - textWidth
/ 2, bottomHeight - stopY - 10);
startX += mLineWidth;
index++;
}
}
}
}
//画 X 轴和 Y 轴的竖线+箭头
private void drawXYLine(Canvas canvas) {
/**
* 让 Y 轴文字与最左有 dip2px(10)的边距
* */
//Y 轴竖线
canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new
Point((10) + mLeftYWidth, 10), mXYLinePaint);
//X 轴竖线
canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new
Point(widthMeasureSpec - 10, bottomHeight), mXYLinePaint);
//画个箭头？？Y 轴
canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((6) +
mLeftYWidth, 20), mXYLinePaint);
canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((14) +
mLeftYWidth, 20), mXYLinePaint);
//X 轴箭头
canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new
Point(widthMeasureSpec - 20, bottomHeight - (4)), mXYLinePaint);
canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new
Point(widthMeasureSpec - 20, bottomHeight + (4)), mXYLinePaint);
}
//给 Y 轴和 X 轴写相应的文字
private void drawXYText(Canvas canvas) {
if (isShowYText) {
//Y 轴写字
for (int i = 1; i <= 5; i++) {
float startY = bottomHeight - bottomHeight * 0.9f / maxHeight *
maxHeight / 5 * i;
canvas.drawLine(new Point((10) + mLeftYWidth, startY), new
Point((15) + mLeftYWidth, startY), mYTextPaint);
float width = mYTextPaint.measureText(maxHeight / 5 * i + "");
float dy = 12.0f;
canvas.drawText(mYTextPaint,maxHeight / 5 * i + "", (int) ((10)
+ mLeftYWidth - width - (5)), startY + dy);
}
}
if (!isShowXText) {
return;
}
//X 轴写字
if (barGraphTextList != null && barGraphTextList.length > 0) {
for (int i = 0; i < barGraphTextList.length; i++) {
float startX = mLineSpaceWidth * (i + 1) + mLineWidth *
barGraphDataList.length * i + mLeftYWidth + (10);
//中间有一个间隔
startX = startX + (mLineWidth * barGraphDataList.length) * 1.0f / 2;
float textWidth = mXTextPaint.measureText(barGraphTextList[i]);
canvas.drawText(mXTextPaint,barGraphTextList[i], startX -
textWidth / 2, heightMeasureSpec - (5));
}
}
}
// 对外提供的核心接口
public void setBarGraphData(int[][] barGraphDataList, int[]
barGraphColorList, String[] barGraphTextList) {
this.barGraphDataList = barGraphDataList;
this.barGraphColorList = barGraphColorList;
this.barGraphTextList = barGraphTextList;
for(int i = 0; i < barGraphDataList.length; ++i) {
for(int j = 0; j < barGraphDataList[i].length; ++j) {
if (this.maxHeight < barGraphDataList[i][j]) {
this.maxHeight = barGraphDataList[i][j];
}
}
}
while(this.maxHeight % 5 != 0) {
++this.maxHeight;
}
if (barGraphTextList != null && barGraphTextList.length > 0) {
this.isShowXText = true;
}
if (this.isShowYText) {
this.mLeftYWidth =
this.mYTextPaint.measureText(String.valueOf(this.maxHeight));
}
this.mBottomXWidth = 10.0F;
if (this.isShowXText) {
FontMetrics fontMetrics = this.mXTextPaint.getFontMetrics();
this.mBottomXWidth += ((fontMetrics.bottom - fontMetrics.top) /
2.0F - fontMetrics.bottom) * 2.0F;
}
this.measureWidth(this.heightMeasureSpec);
this.invalidate();
}

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05