对于图表中的x轴效果,我们有时想要实现如图所示的特定刻度线。若需绘制x轴的短刻度线,我们可以利用现有资源,将原本的网格线稍作修改,只需绘制一条简洁的短线即可达到目的。
具体的方法就是写一个类MyXAxisRender继承自XAxisRenderer,重写父类的drawGridLine方法,
代码如下:
TypeScript
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:
TypeScript
this.model.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!));
完整代码如下:
TypeScript
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数据,并将其传递给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.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)
}
}
}