HarmonyOS-MPChart以X轴或y轴为区间设置不同颜色

news2024/11/17 13:37:26

        本文是基于鸿蒙三方库mpchart OpenHarmony-SIG/ohos-MPChart 的使用，以X轴为区间设置不同的曲线颜色。

        mpchart本身的绘制功能是不支持不同区间颜色不同的曲线的，那么当我们的需求曲线根据x轴的刻度区间绘制不同颜色，就需要自定义绘制方法了。

        首先来看数据线的绘制方法，因为这里以曲线为例，所以我们只需要修改绘制曲线的方法，找到mpchart源码中LineChartRenderer类的drawCubicBezier方法，我们自定义一个MyDataRender类继承自LineChartRenderer类，然后将LineChartRenderer类的drawCubicBezier方法复制到自定义的类中，在其基础上做修改。

        本文的示例是绘制两段颜色不一样的曲线，并且以x=10为分界点，所以只需要新建一个Path2D对象cubicPath2，记录x>10以后的曲线就可以了，前半段曲线就是原有的cubicPath，当j==10的时候，开始记录cubicPath2的起始点，即通过moveTo方法移动到起始点，代码如下：

之后就是新启一个for循环，将cubicPath2的线条继续画完，这样到最后，我们就得到了两个Path2D对象，一个是x = 10以前的cubicPath对象，另一个是x = 10以后的cubicPath2对象，代码如下：

建立并赋值两个Path2D对象之后，就可以开始为它们绘制不同颜色的值了：

其中cubicPath绘制为红色，cubicPath2绘制为绿色，完整代码如下：

import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart';

export default class MyDataRender extends LineChartRenderer{

  protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: ILineDataSet) {
    if (!this.mChart || !this.mXBounds) {
      return;
    }
    const phaseY: 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 cubicPath = new Path2D();
    let cubicPath2 = new Path2D();
    if (this.mXBounds.range >= 1) {
      let prevDx: number = 0;
      let prevDy: number = 0;
      let curDx: number = 0;
      let curDy: number = 0;

      // Take an extra point from the left, and an extra from the right.
      // That's because we need 4 points for a cubic bezier (cubic=4), otherwise we get lines moving and doing weird stuff on the edges of the chart.
      // So in the starting `prev` and `cur`, go -2, -1
      // And in the `lastIndex`, add +1

      const firstIndex: number = this.mXBounds.min + 1;
      const lastIndex: number = this.mXBounds.min + this.mXBounds.range;

      let prevPrev: EntryOhos | null;
      let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 2, 0));
      let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 1, 0));
      let next: EntryOhos | null = cur;
      let nextIndex: number = -1;

      if (cur === null) return;

      Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
      // let the spline start
      cubicPath.moveTo(cur.getX(), cur.getY() * phaseY);

      for (let j: number = this.mXBounds.min + 1; j <= 10; 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;

        cubicPath.bezierCurveTo(
          prev.getX() + prevDx,
          (prev.getY() + prevDy) * phaseY,
          cur.getX() - curDx,
          (cur.getY() - curDy) * phaseY,
          cur.getX(),
          cur.getY() * phaseY
        );
        if(j == 10){
          cubicPath2.moveTo(cur.getX(), cur.getY() * phaseY);
        }
      }


      for (let j: number = 11; 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;

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

    // if filled is enabled, close the path
    if (dataSet.isDrawFilledEnabled()) {
      let cubicFillPath: Path2D = new Path2D();
      // cubicFillPath.reset();
      cubicFillPath.addPath(cubicPath);

      if (c && trans) {
        this.drawCubicFill(c, dataSet, cubicFillPath, trans, this.mXBounds);
      }
    }

    // this.mRenderPaint.setColor(dataSet.getColor());
    // this.mRenderPaint.setStyle(Style.STROKE);

    if (trans) {
      cubicPath = trans.pathValueToPixel(cubicPath);
      cubicPath2 = trans.pathValueToPixel(cubicPath2);
    }

    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.strokeStyle = "#f00";
    c.stroke(cubicPath);
    c.closePath();

    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.strokeStyle = "#0f0";
    c.stroke(cubicPath2);
    c.closePath();
    this.mRenderPaint.setDashPathEffect(null);
  }
}

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

import {
  JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel,
  Mode,
  LineDataSet,
  XAxisPosition,
} from '@ohos/mpchart';
import MyDataRender from './MyDataRender';

@Entry
@Component
struct Index {
  private model: LineChartModel = new LineChartModel();

  aboutToAppear() {
    // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
    // 循环生成 1 到 20 的随机数据，并添加到 values 中
    for (let i = 1; i <= 20; i++) {
      values.add(new EntryOhos(i, Math.random() * 100));
    }
    // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet'
    let dataSet = new LineDataSet(values, 'DataSet');
    dataSet.setMode(Mode.CUBIC_BEZIER);
    dataSet.setDrawCircles(false);
    let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
    dataSetList.add(dataSet);
    // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model
    let lineData: LineData = new LineData(dataSetList);
    this.model?.setData(lineData);
    this.model.getAxisLeft()?.setAxisLineWidth(2);
    this.model.getXAxis()?.setPosition(XAxisPosition.BOTTOM);
    this.model.getAxisRight()?.setEnabled(false);
    this.model.getDescription()?.setEnabled(false);
    this.model.setRenderer(new MyDataRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler()))

  }

  build() {
    Column() {
      LineChart({ model: this.model })
        .width('100%')
        .height('50%')
        .backgroundColor(Color.White)
    }
  }
}

本文的示例线段颜色分隔点和颜色段数都是写的固定的，如果需要不固定的，在设置数据的时候就传入分隔点和颜色值，可以自行定义一个MyLineDataSet类，继承自LineDataSet，重写其构造方法和并增加属性值。

类似上篇文章讲的虚实相接曲线的写法：

然后在设置数据的时候用自定义的MyLineDataSet类就可以了。

 以下是y轴的刻度范围来动态调整曲线的颜色的方法

  

        若需根据y轴的刻度范围来动态调整曲线的颜色，可以借鉴下面代码的实现方式。具体而言，在代码中使用0.5作为分界点，这代表了一个比例值，即图表高度的50%处。如果我们将y轴的刻度范围映射到百分比上，其中最低点设为0%（对应y值的最小值），最高点设为100%（对应y值的最大值），那么当y值小于或等于50%（即0.5）时，曲线颜色为红色；而当y值大于50%时，曲线颜色则变为蓝色。这样，0.5作为颜色转换的分界点，直接对应于y轴上50%的位置，实现了根据y值动态改变曲线颜色的效果。

这个方法可以获取y轴最大最小值：

this.mChart.getAxis(AxisDependency.LEFT)?.getAxisMaximum();
this.mChart.getAxis(AxisDependency.LEFT)?.getAxisMinimum();

完整代码如下：

import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart';

export default class MyDataRender extends LineChartRenderer{

  protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: ILineDataSet) {
    if (!this.mChart || !this.mXBounds) {
      return;
    }
    const phaseY: 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 cubicPath = new Path2D();
    // cubicPath.reset();
    if (this.mXBounds.range >= 1) {
      let prevDx: number = 0;
      let prevDy: number = 0;
      let curDx: number = 0;
      let curDy: number = 0;

      // Take an extra point from the left, and an extra from the right.
      // That's because we need 4 points for a cubic bezier (cubic=4), otherwise we get lines moving and doing weird stuff on the edges of the chart.
      // So in the starting `prev` and `cur`, go -2, -1
      // And in the `lastIndex`, add +1

      const firstIndex: number = this.mXBounds.min + 1;
      const lastIndex: number = this.mXBounds.min + this.mXBounds.range;

      let prevPrev: EntryOhos | null;
      let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 2, 0));
      let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 1, 0));
      let next: EntryOhos | null = cur;
      let nextIndex: number = -1;

      if (cur === null) return;

      Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
      // let the spline start
      cubicPath.moveTo(cur.getX(), cur.getY() * phaseY);

      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;

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

    // if filled is enabled, close the path
    if (dataSet.isDrawFilledEnabled()) {
      let cubicFillPath: Path2D = new Path2D();
      // cubicFillPath.reset();
      cubicFillPath.addPath(cubicPath);

      if (c && trans) {
        this.drawCubicFill(c, dataSet, cubicFillPath, trans, this.mXBounds);
      }
    }

    // this.mRenderPaint.setColor(dataSet.getColor());
    // this.mRenderPaint.setStyle(Style.STROKE);

    let grad = c.createLinearGradient(0, this.mChart.getHeight(), 0, 0);
    grad.addColorStop(0.0, '#f00')
    grad.addColorStop(0.5, "#f00")

    grad.addColorStop(0.5, "#00f")
    grad.addColorStop(1.0, '#00f')
    c.strokeStyle = grad;
    if (trans) {
      cubicPath = trans.pathValueToPixel(cubicPath);
    }

    Utils.resetContext2DWithoutFont(c, this.mRenderPaint);
    c.beginPath();
    c.stroke(cubicPath);
    c.closePath();
    this.mRenderPaint.setDashPathEffect(null);
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2046461.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LVS （Linux virual server）

LVS （Linux virual server）

LVS简介 LVS&#xff08;Linux Virtual Server&#xff09;是一个基于Linux平台的开源负载均衡系统。它通过将多个服务器组成一个虚拟服务器集群&#xff0c;实现了高效的负载均衡和流量分发。 LVS的核心思想是利用IP负载均衡技术和内容请求分发机制&a…
阅读更多...
传知代码-【CLIP】文本也能和图像配对

传知代码-【CLIP】文本也能和图像配对

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 概述 模态&#xff1a;数据的一种形式&#xff0c;如图像、文本、声音、点云等。 多模态学习&#xff0c;就是利用模型同时处理多个模态数据&#xff0c;有助于提高模型的准确性和泛化能力。在自动驾驶场景中&am…
阅读更多...
利用住宅代理应对机器人流量挑战：识别、使用与检验指南

利用住宅代理应对机器人流量挑战：识别、使用与检验指南

引言 什么是机器人流量&#xff1f;其工作原理是什么&#xff1f; 机器人流量来自哪里&#xff1f; 合法使用机器人时如何避免被拦截&#xff1f; 如何检验恶意机器人流量&#xff1f; 总结 引言 你是否曾经遇到过访问某个网站时&#xff0c;被要求输入验证码或完成一些其…
阅读更多...
源代码加密的意义和办法？

源代码加密的意义和办法？

一、源代码加密的意义1、防止恶意修改&#xff1a;未加密的源代码容易被恶意用户或竞争对手获取并修改&#xff0c;以植入恶意代码或病毒&#xff0c;损害软件的功能性和安全性。加密后的源代码即使被非法获取&#xff0c;也无法修改或理解&#xff0c;从而防止了被破坏的风险。…
阅读更多...
品味白酒的四大步骤，体验不一样的美酒人生

品味白酒的四大步骤，体验不一样的美酒人生

在华夏千年的文化传承中&#xff0c;白酒如同一部厚重的历史长卷&#xff0c;每一滴都蕴含着丰富的故事与智慧。豪迈白酒&#xff08;HOMANLISM&#xff09;&#xff0c;作为这长卷中的璀璨篇章&#xff0c;更是以其不同的魅力&#xff0c;吸引着无数品鉴者去探寻其中的奥秘。今…
阅读更多...
android13 禁用wifi

android13 禁用wifi

总纲 android13 rom 开发总纲说明 目录 1.前言 2.情况分析 3.代码分析 3.1 代码位置1 3.2 代码位置2 3.3 代码位置3 4.代码修改 5. 彩蛋 1.前言 这个文章讲的是，在frameworks里面禁止打开wifi。 2.情况分析 我们打开wifi一般是 public static void turnOnWifi(Co…
阅读更多...
Linux修改ssh默认端口22为其他端口2024

Linux修改ssh默认端口22为其他端口2024

一、修改配置文件 修改ssh服务的配置文件&#xff1a; /etc/ssh/sshd_config 将Port 22放开注释&#xff0c;并将22修改为2024&#xff0c;并保存 二、重启sshd服务 systemctl restart sshd 三、重启服务失败 如果重启服务失败&#xff0c;可以执行以下命令&#xff1a; …
阅读更多...
web 自动化测试，一定得掌握的 8 个核心知识点

web 自动化测试，一定得掌握的 8 个核心知识点

使用 cypress 进行端对端测试&#xff0c;和其他的一些框架有一个显著不同的地方&#xff0c;它使用 javascript 作为编程语言。传统主流的 selenium 框架是支持多语言的&#xff0c;大多数 QA 会的python 和 java 语言都可以编写 selenium 代码&#xff0c;遇到需要编写 js 代…
阅读更多...
HoloLens 和 Unity 空间坐标系统 Coordinate systems

HoloLens 和 Unity 空间坐标系统 Coordinate systems

坐标系统 Spatial coordinate systems 所有的 3D 图形应用程序都使用笛卡尔坐标系统来推理虚拟物体的位置和朝向。 这些坐标系建立三个垂直轴&#xff1a;X、Y 和 Z。 添加到场景的每个对象在其坐标系中都有一个 XYZ 位置。 Windows 调用在物理世界中具有实际意义的坐标系统…
阅读更多...
Win10系统配置JDK和Maven环境变量

Win10系统配置JDK和Maven环境变量

目录 一、Win10系统配置JDK和Maven环境变量 二、测试 配置环境变量可以不用cd到应用程序的bin目录&#xff0c;就可以运行。配置环境变量可以方便IDE开发工具识别JDK和Maven 省去了手动选择。 一、Win10系统配置JDK和Maven环境变量 1、右键我的电脑>属性&#xff0c;弹出…
阅读更多...
【Java 并发编程】(二) 从对象内存布局开始聊 synchronized

【Java 并发编程】(二) 从对象内存布局开始聊 synchronized

对象的内存布局 首先抛出一个经典面试题: 一个 Object 对象占多大? 这里我用工具打印了出来, 发现是 “16bytes”, 也就是 16B; 为什么? 请继续往下看; 普通对象(除了数组), 由markword, 类型指针, 实例数据(就是对象里的成员), 对齐填充(整个对象大小要能被8B整数, 方便6…
阅读更多...
谷歌前CEO施密特放飞自我：斯坦福课堂上的AI洞见

谷歌前CEO施密特放飞自我：斯坦福课堂上的AI洞见

谷歌前CEO施密特放飞自我&#xff1a;斯坦福课堂上的AI洞见 曾经担任谷歌CEO长达10年之久的Eric Schmidt&#xff0c;近日在斯坦福大学计算机学院的会议上发表了一场引人深思的演讲。在这场讲座中&#xff0c;他全程“放飞自我”&#xff0c;甚至在讲话中提醒台下学生&#xf…
阅读更多...
将 PDF 转换为 JPG 的 3 种简便方法

将 PDF 转换为 JPG 的 3 种简便方法

PDF&#xff08;Portable Document Format&#xff09;是Adobe公司开发的一种用于呈现文档的常用文件格式。PDF文件可以包含图像和文本。它承载着固定布局平面文档的完整描述&#xff0c;包括文本、字体、图像等信息。但很多时候&#xff0c;你需要将PDF转换为JPG。 您想将PDF…
阅读更多...
The Science of Procrastination - And How To Manage It

The Science of Procrastination - And How To Manage It

img&#xff1a;Perseid Meteors over Stonehenge 一场英仙座流星雨 虽然英仙座流星雨在昨晚达到了顶峰&#xff0c;但一些英仙座流星雨在接下来的几个晚上仍然可以看到 Lets face it. Youre likely reading this article in an effort to avoid some other tasks youre pro…
阅读更多...
UART通信实现与验证（RS485）

UART通信实现与验证（RS485）

前言 UART是一种常用的串行通信协议&#xff0c;RS485则是一种用于长距离和抗干扰的物理层标准。结合UART和RS485可以实现可靠的数据传输&#xff0c;特别是在多点通信和长距离应用中。通过合适的硬件连接、软件配置和验证测试&#xff0c;可以确保这一通信系统的稳定性和数据完…
阅读更多...
达美航空运营中断造成重大财务损失

达美航空运营中断造成重大财务损失

达美航空遇运营中断 达美航空公司&#xff08;Delta Air Lines&#xff0c;股票代码&#xff1a;DAL&#xff09;周四宣布&#xff0c;由于CrowdStrike引发的系统故障&#xff0c;其运营受到了严重影响。本季度&#xff0c;该公司预计收入将减少3.8亿美元。这次故障导致达美航…
阅读更多...
stm32入门学习14-电源控制

stm32入门学习14-电源控制

有时候我们的程序中有些触发执行条件&#xff0c;有时这些触发频率很少&#xff0c;我们的程序就一直在循环&#xff0c;这样就很浪费电&#xff0c;我们可以通过PWR电源控制来实现低功耗模式&#xff0c;即只有在触发时才执行程序&#xff0c;其余时间可以关闭一些没必要的设备…
阅读更多...
zdppy+vue3+onlyoffice文档管理系统项目实战 20240812上课笔记

zdppy+vue3+onlyoffice文档管理系统项目实战 20240812上课笔记

遗留问题 1、增加新建和导入按钮&#xff0c;有按钮了&#xff0c;但是还没有完善&#xff0c;图标还不对&#xff0c;需要解决 2、登录功能 3、用户管理 4、角色管理 5、权限管理 6、分享功能 解决新建和导入的图标问题 解决代码&#xff1a; <a-button type"prim…
阅读更多...
数据中台之数据开发-算法开发

数据中台之数据开发-算法开发

目录 一、数据智能化挑战 二、算法开发的作用 三、算法架构与算法使用场景 3.1 算法架构总览 3.2 算法的适用场景 3.2.1 金融风控和反欺诈 3.2.2 文本挖掘分析 3.2.3 广告精准营销 3.2.4 个性化推荐 四、 算法开发涉及的内容 4.1 建模 4.1.1 可视化建模 4.1.1.1 可…
阅读更多...
Vue3使用el-table实现多级表头合并列

Vue3使用el-table实现多级表头合并列

不难发现&#xff0c;需要多级表头的列只需要在外面包一层el-table-column起名字即可 <el-table :data"tableData" style"width: 100%"><el-table-column type"index" label"序号" width"100" align"center&q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023