【鸿蒙实战开发】HarmonyOS 高级图表实现解决方案

最新推荐文章于 2024-08-29 21:54:40 发布
最新推荐文章于 2024-08-29 21:54:40 发布
阅读量1.1k 收藏 25
点赞数 8
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/140912545
版权
前端 同时被 3 个专栏收录
200 篇文章 0 订阅
订阅专栏
鸿蒙
200 篇文章 8 订阅
订阅专栏
安卓
200 篇文章 0 订阅
订阅专栏

方案描述

mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。

使用准备

  1. 下载三方库控制台输入：ohpm install @ohos/mpchart。

  2. 初始化图表配置构建类。

初始化三方库得构建类，图表数据，线性数据等。

import { LineChart, LineChartModel } from '@ohos/mpchart'; // 初始化图表配置构建类 
import { XAxis, XAxisPosition } from '@ohos/mpchart'; // x轴 
import { YAxis, AxisDependency, YAxisLabelPosition } from '@ohos/mpchart'; // Y轴 
import { LineData } from '@ohos/mpchart'; // 生成图表数据 
import { LineDataSet, Mode } from '@ohos/mpchart'; //线形图数据集合 
import { EntryOhos } from '@ohos/mpchart'; //图表数据结构基础类
  1. 配置图表指定样式。

注：此步骤是初始化底层的表框架，也是就后面的网格。

图表生成分为x、y轴。

setPosition设置：

x轴（getXAxis）得显示范围：TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE，x轴只需要设置一次即可。

y轴（getAxisLeft，getAxisRight）表内左右显示范围：OUTSIDE_CHART, INSIDE_CHART，如需只设置一侧，创建实例时，添加属性添加所需侧即可。

let topAxis = this.model.getXAxis();//图表x轴 
if (topAxis) { 
  topAxis.setLabelCount(5, false);//设置绘制标签个数 
  topAxis.setPosition(XAxisPosition.TOP);//设置标签位置 
  topAxis.setAxisMinimum(0); //设置最小值 
  topAxis.setAxisMaximum(50); //设置最大值 
  topAxis.setDrawAxisLine(false)// 启用绘制x轴轴线 
  topAxis.setDrawLabels(false) // 不绘制x轴标签 
  topAxis.setDrawGridLines(false)// 不绘制X轴网格线 
} 

let leftAxis = this.model.getAxisLeft(); 
if (leftAxis) { 
  leftAxis = new YAxis(AxisDependency.LEFT); 
  leftAxis.setLabelCount(6, false); 
  leftAxis.setDrawGridLines(true);//启用绘制左侧Y轴网格线 
  leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); 
  leftAxis.setAxisMinimum(0); 
  leftAxis.setAxisMaximum(50); 
  leftAxis.setDrawLabels(true); 
  leftAxis.setDrawGridLines(true); 
} 

let rightAxis = this.model.getAxisRight(); 
if (rightAxis) { 
  rightAxis = new YAxis(AxisDependency.RIGHT); 
  rightAxis.setDrawGridLines(true); 
  rightAxis.setLabelCount(6, false); 
  rightAxis.setAxisMinimum(0); 
  rightAxis.setAxisMaximum(50); 
  rightAxis.setDrawAxisLine(false); 
  rightAxis.setDrawLabels(true); 
  rightAxis.setDrawGridLines(true); 
} 

this.model.setData(this.lineData);

应用场景

解决方案：mpchart
场景一：线性表虚实线交接【曲线】
实现效果
图1-1

image.png

核心代码

我们需要写一个MyLineDataSet类，继承自LineDataSet，也就是线型图的数据类。为什么需要这个类呢？因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的，这里MyLineDataSet类的构造方法比它的父类多了一个interval参数，也就是虚实分隔点。

import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart'; 

export class MyLineDataSet extends LineDataSet { 
  interval: number = 0; 
  constructor(yVals: JArrayList<EntryOhos> | null, label: string, interval: number) { 
    super(yVals, label); 
    this.interval = interval; 
  } 
}

定义好自己的数据类之后，就要定义MyRender类了，实线具体的绘制功能，MyRender类继承自LineChartRenderer，因为是要绘制曲线，所以重写的是drawCubicBezier方法，MyRender类的代码。

import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart'; 

export default class MyRender extends LineChartRenderer { 
  protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: MyLineDataSet) { 
    if (!this.mChart || !this.mXBounds) { 
      return; 
    } 
    const PHASE_Y: number = this.mAnimator ? this.mAnimator.getPhaseY() : 1; 
    const TRANS: Transformer | null = this.mChart.getTransformer(dataSet.getAxisDependency()); 
    this.mXBounds.set(this.mChart, dataSet); 
    const intensity: number = dataSet.getCubicIntensity(); 
    let lineCubicPath = new Path2D(); 
    let dotsCubicPath = new Path2D(); 
    if (this.mXBounds.range >= 1) { 
      let prevDx: number = 0; 
      let prevDy: number = 0; 
      let curDx: number = 0; 
      let curDy: number = 0; 
      const FIRST_INDEX: number = this.mXBounds.min + 1; 
      const INTERVAL: number = dataSet.interval; 
      let prevPrev: EntryOhos | null; 
      let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(FIRST_INDEX - 2, 0)); 
      let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(FIRST_INDEX - 1, 0)); 
      let next: EntryOhos | null = cur; 
      let nextIndex: number = -1; 
      if (cur === null) return; 
      Utils.resetContext2DWithoutFont(c, this.mRenderPaint); 
      // let the spline start 
      lineCubicPath.moveTo(cur.getX(), cur.getY() * PHASE_Y); 
      for (let j: number = this.mXBounds.min + 1; j <= this.mXBounds.range + this.mXBounds.min; j++) { 
        prevPrev = prev; 
        prev = cur; 
        cur = nextIndex === j ? next : dataSet.getEntryForIndex(j); 
        nextIndex = j + 1 < dataSet.getEntryCount() ? j + 1 : j; 
        next = dataSet.getEntryForIndex(nextIndex); 
        prevDx = (cur.getX() - prevPrev.getX()) * intensity; 
        prevDy = (cur.getY() - prevPrev.getY()) * intensity; 
        curDx = (next.getX() - prev.getX()) * intensity; 
        curDy = (next.getY() - prev.getY()) * intensity; 
        if (j < INTERVAL) { 
          lineCubicPath.bezierCurveTo( 
            prev.getX() + prevDx, 
            (prev.getY() + prevDy) * PHASE_Y, 
            cur.getX() - curDx, 
            (cur.getY() - curDy) * PHASE_Y, 
            cur.getX(), 
            cur.getY() * PHASE_Y 
          ); 
          if (j === INTERVAL - 1) { 
            dotsCubicPath.moveTo(cur.getX(), cur.getY()); 
          } 
        } else { 
          dotsCubicPath.bezierCurveTo( 
            prev.getX() + prevDx, 
            (prev.getY() + prevDy) * PHASE_Y, 
            cur.getX() - curDx, 
            (cur.getY() - curDy) * PHASE_Y, 
            cur.getX(), 
            cur.getY() * PHASE_Y 
          ); 
        } 
      } 
    } 
    // if filled is enabled, close the path 
    if (dataSet.isDrawFilledEnabled()) { 
      let cubicFillPath: Path2D = new Path2D(); 
      cubicFillPath.addPath(lineCubicPath); 
      if (c && TRANS) { 
        this.drawCubicFill(c, dataSet, cubicFillPath, TRANS, this.mXBounds); 
      } 
    } 
    this.mRenderPaint.setColor(dataSet.getColor()); 
    this.mRenderPaint.setStyle(Style.STROKE); 
    if (TRANS && TRANS.pathValueToPixel(lineCubicPath)) { 
      lineCubicPath = TRANS.pathValueToPixel(lineCubicPath); 
    } 
    if (TRANS && TRANS.pathValueToPixel(dotsCubicPath)) { 
      dotsCubicPath = TRANS.pathValueToPixel(dotsCubicPath); 
    } 
    Utils.resetContext2DWithoutFont(c, this.mRenderPaint); 
    c.beginPath(); 
    c.stroke(lineCubicPath); 
    c.closePath(); 
    Utils.resetContext2DWithoutFont(c, this.mRenderPaint); 
    c.beginPath(); 
    c.setLineDash([5, 5, 0]) 
    c.stroke(dotsCubicPath); 
    c.closePath(); 
    this.mRenderPaint.setDashPathEffect(null); 
  } 
}

这个方法主要内容就是定义了两条path2D，也就是线段来绘制实线和虚线。

//实线 
let solidLinePath = new Path2D(); 
//虚线 
let dashedLinePath = new Path2D();

绘制方法如下：

solidLinePath.bezierCurveTo( 
  prev.getX() + prevDx, 
  (prev.getY() + prevDy) * phaseY, 
  cur.getX() - curDx, 
  (cur.getY() - curDy) * phaseY, 
  cur.getX(), 
  cur.getY() * phaseY 
);

就是调用path2D的方法bezierCurveTo方法，这个方法有6个参数，分别是控制点1的（x值，y值 ）和 控制点2的（x值，y值）以及目标点的（x值，y值）。直接把父类的方法抄过来即可。

我们需要有一个if判断，if(j <= dataSet.interval)就是当j小于dataSet.interval时，写绘制实线的方法，当j等于dataSet.interval时，虚线要moveTo当前位置；当j大于dataSet.interval时，就调用dashedLinePath.bezierCurveTo方法绘制虚线了。

最后绘制方法是调用c.stroke方法绘制的。c.setLineDash([5,5,0]);是设置虚线效果。

Utils.resetContext2DWithoutFont(c, this.mRenderPaint); 
c.beginPath(); 
c.stroke(solidLinePath); 
c.closePath(); 

Utils.resetContext2DWithoutFont(c, this.mRenderPaint); 
c.beginPath(); 
c.setLineDash([5,5,0]); 
c.stroke(dashedLinePath); 
c.closePath();

最后就是使用，代码如下：

// 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据 
let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>(); 
// 循环生成 1 到 6 的随机数据，并添加到 values 中 
//i为图表内数据线的节点数 
for (let i = 1; i <= 6; i++) { 
  values.add(new EntryOhos(i, Math.random() * 100)); 
} 
// 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet' 
//3是图表内数据线实线的数量（按节点来算，如果2个节点就为一条线性数据） 
let dataSet = new MyLineDataSet(values, 'DataSet', 3); 
//设置线条模式 
dataSet.setMode(Mode.CUBIC_BEZIER); 

let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>(); 
dataSetList.add(dataSet); 
// 创建 LineData 对象，使用 dataSetList数据，并将其传递给model 
let lineData: LineData = new LineData(dataSetList); 
this.model?.setData(lineData); 
//canvas绘制 
 this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler()))、 
//动画播放时长 
this.model.animateX(5000);
场景二：线性表模拟数据图表实时变化
实现效果
  • 绘制图表：添加底层图表数据。
  • 绘制线标：添加实时线性数据。
  • 清空：清空线性数据。

image.png

核心代码

初始化底层表格后，需要给表格上绑定数据。

首先判定data是否有数据，不为空的话获取这个DataSet这个容器，如果容器DataSet为空，添加样式即可。

调用接口addEntry填充数据，将之前的生成的数据用set.getEntryCount一起添加，再利用随机数填充新数据，从0索引开始。

notifyDataChanged计算数据的最大值和最小值，notifyDataSetChanged触发数据更新，以x轴移动。

注：每次通过调用addEntry()获取set容器不断更新里面的数据做渲染。

addEntry() { 
  let data = this.model.getData();//获取数据 
  if (data != null) { 
    let set = data.getDataSetByIndex(0); 
    if (set == null) { 
      set = this.createSet();//填充样式 
      data.addDataSet(set); 
    } 
    data.addEntry(new EntryOhos(set.getEntryCount(), (Math.random() * 40) + 30), 0);//填充数据 
    data.notifyDataChanged(); 
    this.model.notifyDataSetChanged();//触发坐标轴数据更新 
    this.model.setVisibleXRangeMaximum(50);// 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 
    this.model.moveViewToX(data.getEntryCount());//以X轴移动 
  } 
}
场景三：线性表自定义表节点和线性节点
实现效果

上方slider：x轴传值监听，下方slider：y轴传值监听。

image.png

注册监听事件"seekBarXValueWatch"和"seekBarYValueWatch"，滑动组件Slider，当值变化时触发监听，传递给setData。

核心代码
@State @Watch("seekBarXValueWatch") seekBarX: SeekBarModel = new SeekBarModel()//x轴传值监听 
@State @Watch("seekBarYValueWatch") seekBarY: SeekBarModel = new SeekBarModel()//Y轴传值监听 

seekBarXValueWatch(): void { 
    this.setData(this.seekBarX.getValue(), this.seekBarY.getValue()); 
  } 
  seekBarYValueWatch(): void { 
    this.setData(this.seekBarX.getValue(), this.seekBarY.getValue()); 
  }

将监听后数据传入setData，经过计算得出X,Y轴的数量，传入数据结构基础类JArrayList，添加样式，绑定图表。

注：每次滑动slider改变的时候，触发监听将值传递给setData重新计算数据，达到变化效果。

private async setData(count: number, range: number): Promise<void> { 
  let start: number = 1; 
  let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>(); 
  for (let i = start; i < count; i++) { //X轴坐标个数 
    // 设置数据点Y值 
    let val = Math.random() * range; //Y轴值 
    values.add(new EntryOhos(i, val)); 
  } 
 //添加样式 
  this.dataSet = new LineDataSet(values, "DataSet 1"); 
  this.dataSet.setDrawIcons(false) 
  this.dataSet.setDrawFilled(true);//是否显示阴影 
  this.dataSet.setDrawValues(true); 
  this.dataSet.setMode(Mode.LINEAR);//直线模式 
  this.dataSet.setColorByColor(ChartColor.rgb(140, 234, 255));//设置折线颜色 
  this.dataSet.setLineWidth(1.5) 
  this.dataSet.setDrawCircles(true);//折线点画圆圈 
  this.dataSet.setDrawIcons(false) // 设置是否绘制数据项图标 
  this.dataSet.setCircleColor(ChartColor.rgb(140, 234, 255));//设置圆环颜色 
   // 设置数据点的半径 
  this.dataSet.setCircleRadius(4);//设置内径 
  this.dataSet.setCircleHoleRadius(2)// 设置半径大小 

  this.dataSet.setCircleHoleColor(Color.White) 
  this.dataSet.setDrawCircleHole(true)//设置内部孔 
  let gradientFillColor = new JArrayList<ChartColorStop>();//渐变颜色类 设置一种颜色即可折现内部 
  gradientFillColor.add(["#FFB6C1", 0.2]); 
  gradientFillColor.add(["#DA70D6", 0.4]); 
  gradientFillColor.add(["#0000FF", 0.6]); 
  gradientFillColor.add(["#FFD700", 0.8]); 
  gradientFillColor.add(["#90EE90", 1.0]); 
  this.dataSet.setGradientFillColor(gradientFillColor);//塞入渐变数据 
  this.dataSet.setDrawFilled(true);//填充绘制 

  let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>(); 
  dataSetList.add(this.dataSet); 线形图数据集合的操作类添加dataset设置好的数据 

  let lineData: LineData = new LineData(dataSetList);//生成图表数据 
  lineData.setValueTextSize(10);//设置文本大小 

  if (this.model) { 
    this.model.setData(lineData);// 将数据与图表配置类绑定 
  } 
}
注意事项

aboutToAppear定义x/y轴的外层图表时，x轴只用定义一次，Y轴根据业务来。

设置渐变颜色线性内的范围不是所有渐变，而只是最表层，如需设置渐变，只推荐两种相邻颜色过度。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/

在这里插入图片描述

代码改变世界996
关注
专栏目录
HarmonyOS 开发中的可视化技术：创建简单的图表应用程序
一键难忘的博客
12-17 143
在HarmonyOS中，我们可以在ability文件夹中的文件中定义图表的数据。这些数据将用于绘制图表。@Override// 设置UI布局// 获取图表数据// 绘制图表// 获取布局容器i++) {// 创建条形图// 创建条形图组件// 创建标签组件// 将条形图和标签添加到布局中通过以上扩展功能，我们可以创建一个功能更为丰富的HarmonyOS图表应用。
HarmonyOS鸿蒙开发指南:基础组件 chart开发指导
sybh的博客
01-09 1122
场景示例 开发者可以根据开关Switch的状态来选择数据展示的状态，当Switch状态为true时，通过定时器来实现数据的动态展示。
鸿蒙5.0开发实战：在鸿蒙中开发图表（ECharts）
最新发布
初一十五的博客
08-29 854
目前为止功能最丰富、兼容性最高的图表库
鸿蒙Harmony常用组件：图表-chart开发指南
2401_84917132的博客
08-16 662
小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的。
HarmonyOS NEXT应用开发之MpChart图表实现案例
maniuT的博客
03-09 1365
MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示，Y轴是否显示，左Y轴位置，右Y轴位置，是否显示X轴，是否绘制背景色，是否设置MarkerView等。
HarmonyOS实战开发-switch、chart组件的使用
2401_82546228的博客
03-31 661
本篇Codelab基于switch组件和chart组件，实现线形图、占比图、柱状图，并通过switch切换chart组件数据的动静态显示。要求实现以下功能：
HarmonyOS实现静态与动态数据可视化图表
HarmonyOSDev的博客
09-06 1509
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行。本篇Codelab基于switch组件和chart组件，实现线形图、占比图、柱状图，并通过switch切换chart组件数据的动静态显示。遍历柱状图所有的数据组，获取每组的数据后，再次遍历每组数据，生成随机数并为barData重新赋值。使用chart组件依次实现线形图、占比图、柱状图。
高级图表实现解决方案
hongxiaomeng的博客
07-23 853
最牛逼android上的图表库MpChart（一） 介绍篇
热门推荐
欢迎关注公众号：【码农突围】，公号后台回复9999，可以获取一份500页的LeetCode刷题笔记。
06-28 4万+
最牛逼android上的图表库MpChart一 介绍篇 MpChart优点 MpChart是什么 MpChart支持哪些图表
鸿蒙应用开发 | 6大布局之 表格布局(TableLayout)！
06-21 1309
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。 上一篇原创文章解读了鸿蒙开发布局的堆叠布局(StackLayout) ，就是将布局一层一层的叠加起来，可以设置相对的位置，使用场景也比较特殊，使用的比较少，也是相对比较简单的一种布局。 如果有开始学习的开发者可以不断的练习，只有多多练习了才能记住和学会。 简介： 表格布局，就是像表格一样，如果有需要做一个界面效果是一种表格效果，或者九宫格，就需要用这种布局。 给大家...
MPChart 曲线、柱状、饼图demo
03-22
使用mpchart 展示数据，有曲线图、柱状图、横向柱状图、饼图样式
android chart MPchart
02-22
android chart MPchart
Hi3861鸿蒙开发板.zip
04-15
Hi3861鸿蒙开发板.zip
MPChartAndroid演示程序
05-15
上次上传了一个简单的MPChartAndroid演示程序，画的图不全的，这次给大家上传一个全的，各种图都包含了，每种图都有演示程序。
MPChartExample
03-22
android 各种百分比 图形 报表 饼状图 柱形图 展示
HarmonyOS实战开发-实现一个计步器卡片应用
2401_82546228的博客
03-28 1113
本篇Codelab基于Stage模型实现带有卡片的计步应用，用于介绍卡片的开发及生命周期实现。需要完成以下功能：
HarmonyOS Next应用开发案例大全-(持续更新中……)
2401_84181911的博客
04-11 1275
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS Next应用开发案例大全-(持续更新中……)(1)
2401_84181911的博客
04-11 1482
前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
鸿邻社区HarmonyOS NEXT应用开发资料
资源摘要信息:"鸿邻社区是基于HarmonyOS NEXT开发的一款应用，包含了源码、文档和图表，是开发者学习和借鉴的宝贵资料。" 知识点: 1. HarmonyOS NEXT：HarmonyOS 是华为开发的操作系统，旨在为多种设备和场景提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值