鸿蒙图表MPChart自定义样式（五）左y轴显示数值，右y轴显示百分比

阿康2024

于 2024-09-06 11:20:33 发布

阅读量56

点赞数 1

分类专栏：鸿蒙应用开发文章标签：华为 harmonyos

本文链接：https://blog.csdn.net/liuhaikang/article/details/141954978

版权

鸿蒙应用开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

左y轴数值不变，右y轴改成百分比，需要通过自定义RightAxisFormatter实现IAxisValueFormatter接口，将右y轴的数值改成百分比文本，RightAxisFormatter类如下：

class RightAxisFormatter implements IAxisValueFormatter {
  maxNumber: number = 0;
  constructor(maxNumber: number) {
    this.maxNumber = maxNumber;
  }
  getFormattedValue(value: number, axis: AxisBase): string {
    switch (value) {
      case this.maxNumber:
        return "100%";
      case this.maxNumber * 4 / 5:
        return "80%";
      case this.maxNumber * 3 / 5:
        return "60%";
      case this.maxNumber * 2 / 5:
        return "40%";
      case this.maxNumber * 1 / 5:
        return "20%";
      case 0:
        return "0%";
    }
    return "";
  }
}

使用方法如下：

//设置标签文本转换器
rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber));

完整代码如下：

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

class RightAxisFormatter implements IAxisValueFormatter {
  maxNumber: number = 0;
  constructor(maxNumber: number) {
    this.maxNumber = maxNumber;
  }
  getFormattedValue(value: number, axis: AxisBase): string {
    switch (value) {
      case this.maxNumber:
        return "100%";
      case this.maxNumber * 4 / 5:
        return "80%";
      case this.maxNumber * 3 / 5:
        return "60%";
      case this.maxNumber * 2 / 5:
        return "40%";
      case this.maxNumber * 1 / 5:
        return "20%";
      case 0:
        return "0%";
    }
    return "";
  }
}

@Entry
@ComponentV2
struct LeftRightAxisPage {
  private model: LineChartModel = new LineChartModel();
  minNumber: number = 0;
  maxNumber: number = 500;
  @Local dataReady: boolean = false;

  setData() {
    // 创建一个 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() * 500));
    }
    // 创建 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);
    let leftAxis = this.model.getAxisLeft();
    let rightAxis = this.model.getAxisRight();

    leftAxis?.setAxisMinimum(this.minNumber);
    leftAxis?.setAxisMaximum(this.maxNumber);
    //设置有6个标签
    leftAxis?.setLabelCount(6, true);

    rightAxis?.setAxisMinimum(this.minNumber);
    rightAxis?.setAxisMaximum(this.maxNumber);
    //设置有6个标签
    rightAxis?.setLabelCount(6, true);

    //设置标签文本转换器
    rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber));
    this.model.getXAxis()?.setPosition(XAxisPosition.BOTTOM);
    this.model.getDescription()?.setEnabled(false);
    this.model?.setData(lineData);
    this.dataReady = true;
  }

  aboutToAppear() {
    // 模拟网络请求，延时1秒获取数据
    setTimeout(() => {
      this.setData()
    }, 1000);
  }

  build() {
    Column() {
      if (this.dataReady) {
        LineChart({ model: this.model })
          .width('100%')
          .height('50%')
          .backgroundColor(Color.White)
      } else {
        LoadingProgress()
          .color(Color.Blue)
      }
    }
  }
}