【鸿蒙南向开发】Ohos-MPChart——支持多种图表绘制的组件

简介

Ohos-MPChart是OpenAtom OpenHarmony（简称“OpenHarmony”）系统显示各种图表视图的三方组件，用于声明式应用开发，提供了多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、K线图、雷达图、气泡图。适用于各种统计后的数据以视觉直观的方式呈现。

使用场景

Ohos-MPChart为广大OpenHarmony应用开发者在处理数据时，使数据显示更加直观。尤其现在的大数据时代面对愈加庞大的数据只需要导入Ohos-MPChart三方组件，然后调用相关的接口就能实现各种各样的图表以方便数据汇总。

效果展示

组件功能描述

Ohos-MPChart是一个强大的图表视图，主要提供多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、K线图等等，具体功能模块如下：

开发环境

安装IDE：支持DevEco Studio 3.0 Release(Build Version 3.0.0.993)版本。安装SDK：支持OpenHarmony API version 8 及以上版本

使用方法

图表一：折线图

1.下载Ohos-MPChart组件并导入LineChart自定义组件：

//下载mpchart组件 
 npm install @ohos/mpchart --save
import { LineChart } from '@ohos/ohos_mpchart'

OpenHarmony npm环境配置等更多内容，请参考安装教程

2.初始化数据

aboutToAppear() {
    this.lineData = this.initCurveData(45, 100);
    this.topAxis.setLabelCount(5, false);
    this.topAxis.setPosition(XAxisPosition.TOP);
    this.topAxis.setAxisMinimum(0);
    this.topAxis.setAxisMaximum(50);
    this.bottomAxis.setLabelCount(5, false);
this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(50);
    this.bottomAxis.setDrawAxisLine(false);
    this.bottomAxis.setDrawLabels(false)

    this.leftAxis = new YAxis(AxisDependency.LEFT);
    this.leftAxis.setLabelCount(7, false);
    this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
    this.leftAxis.setSpaceTop(15);
    this.leftAxis.setAxisMinimum(-50);
    this.leftAxis.setAxisMaximum(200);
    this.leftAxis.enableGridDashedLine(5,5,0)

    this.rightAxis = new YAxis(AxisDependency.RIGHT);
    this.rightAxis.setDrawGridLines(false);
    this.rightAxis.setLabelCount(7, false);
    this.rightAxis.setSpaceTop(11);
    this.rightAxis.setAxisMinimum(-50); // this replaces setStartAtZero(true)
    this.rightAxis.setAxisMaximum(200);
    this.rightAxis.setDrawAxisLine(false);

    var upperLimtLine:LimitLine= new LimitLine(150, "Upper Limit");
    upperLimtLine.setLineWidth(4);
    upperLimtLine.enableDashedLine(10, 10, 0);
    upperLimtLine.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
    upperLimtLine.setTextSize(10);

    var lowerLimtLine:LimitLine= new LimitLine(-30, "Lower Limit");
    lowerLimtLine.setLineWidth(4);
    lowerLimtLine.enableDashedLine(5, 5, 0);
    lowerLimtLine.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
    lowerLimtLine.setTextSize(10);

    this.leftAxis.setDrawLimitLinesBehindData(true);
    this.leftAxis.addLimitLine(upperLimtLine);
    this.leftAxis.addLimitLine(lowerLimtLine);
  }
  private initCurveData(count: number, range: number): LineData {

    let values = new JArrayList<EntryOhos>();

    for (let i = 0; i < 50; i++) {
      let val: number = Math.random() * 180 - 30;
      values.add(new EntryOhos(i, val));
    }

    let gradientFillColor = new Array<ColorStop>();
    gradientFillColor.push(['#ffff0000', 0.1])
    gradientFillColor.push(['#00ff0000', 1.0])

    let dataSet = new JArrayList<ILineDataSet>();

    let set1 = new LineDataSet(values,