鸿蒙MPChart图表自定义（四）短刻度线

本文主要是介绍鸿蒙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图表自定义（四）短刻度线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---