鸿蒙MPChart图表自定义(四)短刻度线

2024-09-06 07:04

本文主要是介绍鸿蒙MPChart图表自定义(四)短刻度线,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        对于图表中的x轴效果,我们有时想要实现如图所示的特定刻度线。若需绘制x轴的短刻度线,我们可以利用现有资源,将原本的网格线稍作修改,只需绘制一条简洁的短线即可达到目的。

具体的方法就是写一个类MyXAxisRender继承自XAxisRenderer,重写父类的drawGridLine方法,

代码如下:

import { Utils, XAxisRenderer } from '@ohos/mpchart';export default class MyXAxisRender extends XAxisRenderer{protected drawGridLine(c: CanvasRenderingContext2D, x: number, y: number): void {Utils.resetContext2DWithoutFont(c, this.mGridPaint);c.beginPath();let bottom = this.mViewPortHandler?.contentBottom()??0;c.moveTo(x, bottom);c.lineTo(x, bottom - 10);c.stroke();c.closePath();}
}

其中关键代码就是c.moveTo(x,bottom)和c.lineTo(x, bottom-10),这两行代码决定了刻度线绘制的位置和长短,即从图表底部开始往上绘制一条长度为10vp的线条。

那么使用的时候,就通过以下代码将X轴的绘制类改成自定义的绘制类 MyXAxisRender:

this.model.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!));

完整代码如下:

import {JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel,Mode,LineDataSet,AxisDependency,XAxisPosition,
} from '@ohos/mpchart';
import MyXAxisRender from './MyXAxisRender';@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数据,并将其传递给modellet 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.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!));}build() {Column() {LineChart({ model: this.model }).width('100%').height('50%').backgroundColor(Color.White)}}
}

这篇关于鸿蒙MPChart图表自定义(四)短刻度线的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据

Druid连接池实现自定义数据库密码加解密功能

《Druid连接池实现自定义数据库密码加解密功能》在现代应用开发中,数据安全是至关重要的,本文将介绍如何在​​Druid​​连接池中实现自定义的数据库密码加解密功能,有需要的小伙伴可以参考一下... 目录1. 环境准备2. 密码加密算法的选择3. 自定义 ​​DruidDataSource​​ 的密码解密3

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》:本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求,通过公司网络代理访问的请求需要做请

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt