簡介

Ohos-MPChart是OpenAtom OpenHarmony（簡稱“OpenHarmony”）系統(tǒng)顯示各種圖表視圖的三方組件，用于聲明式應用開發(fā)，提供了多種多樣的圖表視圖，包括折線圖、曲線圖、柱形圖、餅狀圖、K線圖、雷達圖、氣泡圖。適用于各種統(tǒng)計后的數(shù)據(jù)以視覺直觀的方式呈現(xiàn)。

使用場景

Ohos-MPChart為廣大OpenHarmony應用開發(fā)者在處理數(shù)據(jù)時，使數(shù)據(jù)顯示更加直觀。尤其現(xiàn)在的大數(shù)據(jù)時代面對愈加龐大的數(shù)據(jù)只需要導入Ohos-MPChart三方組件，然后調(diào)用相關(guān)的接口就能實現(xiàn)各種各樣的圖表以方便數(shù)據(jù)匯總。

效果展示

組件功能描述

Ohos-MPChart是一個強大的圖表視圖，主要提供多種多樣的圖表視圖，包括折線圖、曲線圖、柱形圖、餅狀圖、K線圖等等，具體功能模塊如下：

開發(fā)環(huán)境

安裝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'

2.初始化數(shù)據(jù)

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(newEntryOhos(i, val));
}
 
let gradientFillColor =newArray<ColorStop>();
    gradientFillColor.push(['#ffff0000',0.1])
    gradientFillColor.push(['#00ff0000',1.0])
 
let dataSet =newJArrayList<ILineDataSet>();
 
let set1 =newLineDataSet(values,"DataSet 1");
    set1.setDrawFilled(true);
    set1.enableDashedLine(10,5,0)
    set1.setMode(Mode.LINEAR);
    set1.setGradientFillColor(gradientFillColor)
    set1.setColorByColor(Color.Black);
    set1.setLineWidth(1)
    set1.setDrawCircles(true);
    set1.setCircleColor(Color.Black);
    set1.setCircleRadius(2);
    set1.setCircleHoleRadius(1)
    set1.setCircleHoleColor(Color.Green)
    set1.setDrawCircleHole(false)
    dataSet.add(set1);
 
returnnewLineData(dataSet)
}

3.添加數(shù)據(jù)到自定義曲線圖表組件

build() {
    Stack({ alignContent: Alignment.TopStart }) {
       LineChart({
        topAxis: this.topAxis,
        bottomAxis: this.bottomAxis,
        width: this.width,
        height: this.height,
        minOffset: this.minOffset,
        leftAxis: this.leftAxis,
        rightAxis: this.rightAxis,
        lineData: this.lineData,
      })
    }
  }

圖表二：柱狀圖

1.導入BarChart自定義組件：

import{BarChart,BarChartModel} from '@ohos/ohos_mpchart'

2.初始化數(shù)據(jù)

@State model:BarChartModel = new BarChartModel();
  width: number = 350; //表的寬度
  height: number = 500; //表的高度
  minOffset: number = 15; //X軸線偏移量
  leftAxis: YAxis = null;
  rightAxis: YAxis = null;
  bottomAxis: XAxis = new XAxis();
 
  private aboutToAppear(){
    this.leftAxis = new YAxis(AxisDependency.LEFT);
    this.leftAxis.setLabelCount(6, false);
    this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
    this.leftAxis.setSpaceTop(15);
    this.leftAxis.setAxisMinimum(0);
    this.leftAxis.setAxisMaximum(110);
    this.leftAxis.enableGridDashedLine(10,10,0)
 
    this.rightAxis = new YAxis(AxisDependency.RIGHT);
    this.rightAxis.setDrawGridLines(false);
    this.rightAxis.setLabelCount(6, false);
    this.rightAxis.setSpaceTop(11);
    this.rightAxis.setAxisMinimum(0);
    this.rightAxis.setAxisMaximum(110);
 
    this.bottomAxis.setLabelCount(5, false);
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(10);
 
    this.setData(this.bottomAxis.getAxisMaximum(),this.leftAxis.getAxisMaximum())
 
    this.model.width = this.width;
    this.model.height = this.height;
    this.model.init();
    this.model.setDrawBarShadow(false);
    this.model.setDrawValueAboveBar(true);
    this.model.getDescription().setEnabled(false);
    this.model.setMaxVisibleValueCount(60);
    this.model.setLeftYAxis(this.leftAxis);
    this.model.setRightYAxis(this.rightAxis);
    this.model.setXAxis(this.bottomAxis)
    this.model.mRenderer.initBuffers();
    this.model.prepareMatrixValuePx();
  }
  private setData(count: number, range: number) {
    let groupSpace: number = 0.08;
    let barSpace: number = 0.03; // x4 DataSet
    let barWidth: number = 0.2; // x4 DataSet
    let groupCount: number = count + 1;
    let startYear: number = 1980;
    letendYear: number = startYear + groupCount;
letvalues1:JArrayList<BarEntry>=
newJArrayList<BarEntry>();
letvalues2:JArrayList<BarEntry>=
newJArrayList<BarEntry>();
letvalues3:JArrayList<BarEntry>=
newJArrayList<BarEntry>();
letvalues4:JArrayList<BarEntry>=
newJArrayList<BarEntry>();
letrandomMultiplier: number = range;
for(let i = startYear; i < endYear; i++){
      values1.add(newBarEntry(i,
(Math.random()* randomMultiplier)))
      values2.add(newBarEntry(i,
(Math.random()* randomMultiplier)))
      values3.add(newBarEntry(i,
(Math.random()* randomMultiplier)))
      values4.add(newBarEntry(i,
(Math.random()* randomMultiplier)))
}
letset1: BarDataSet,set2:
    BarDataSet,set3: BarDataSet,set4: BarDataSet;
if(this.model.getBarData()!=null&&
this.model.getBarData().getDataSetCount()>0){
      set1 =this.model.getBarData().getDataSetByIndex(0) as BarDataSet;
      set2 =this.model.getBarData().getDataSetByIndex(1) as BarDataSet;
      set3 =this.model.getBarData().getDataSetByIndex(2) as BarDataSet;
      set4 =this.model.getBarData().getDataSetByIndex(3) as BarDataSet;
      set1.setValues(values1);
      set2.setValues(values2);
      set3.setValues(values3);
      set4.setValues(values4);
this.model.getBarData().notifyDataChanged();
this.model.notifyDataSetChanged();
 
}else{
letcolors: number[]=
[Color.rgb(104,241,175),Color.rgb(164,228,251),Color.rgb(242,247,158),Color.rgb(255,102,0)];
      set1 =newBarDataSet(values1,"Company A");
      set1.setColorsByArr(colors);
      set2 =newBarDataSet(values2,"Company B");
      set2.setColorsByArr(colors);
      set3 =newBarDataSet(values3,"Company C");
      set3.setColorsByArr(colors);
      set4 =newBarDataSet(values2,"Company D");
      set4.setColorsByArr(colors);
 
letdataSets: JArrayList<IBarDataSet>=
newJArrayList<IBarDataSet>();
      dataSets.add(set1);
      dataSets.add(set2);
      dataSets.add(set3);
      dataSets.add(set4);
 
letdata: BarData =newBarData(dataSets);
this.model.setData(data);
}
this.model.getBarData().setBarWidth(barWidth);
this.bottomAxis.setAxisMinimum(startYear);
this.bottomAxis.setAxisMaximum(startYear +this.model.getBarData().getGroupWidth(groupSpace, barSpace)* groupCount);
this.model.groupBars(startYear, groupSpace, barSpace);
}

3.添加數(shù)據(jù)到自定義曲線圖表組件

build() {
    Stack(){
      BarChart({model:this.model})
    }
  }

圖表三：餅狀圖

1.導入PieChart自定義組件：

import { PieChart } from '@ohos/ohos_mpchart'

2.初始化數(shù)據(jù)

pieData: PieData = null;
  @State pieModel: PieChart.Model = new PieChart.Model()
  @State @Watch("seekBarXValueWatch")
  seekBarX: SeekBar.Model = new SeekBar.Model()
  @State @Watch("seekBarYValueWatch")
  seekBarY: SeekBar.Model = new SeekBar.Model()
  parties: string[] = [
    "Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H",
    "Party I", "Party J", "Party K", "Party L", "Party M", "Party N", "Party O", "Party P",
    "Party Q", "Party R", "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
    "Party Y", "Party Z"]
 
  private aboutToAppear(): void {
    this.pieData = this.initPieData(4, 10);
    this.pieModel
      .setPieData(this.pieData)
      .setRadius(150)
      .setHoleRadius(0.5)
      .setOffset(new MPPointF(160,200))   // vp
  }
  private initPieData(count: number,
  range: number): PieData{
    let entries = new JArrayList<PieEntry>();
    for (var i = 0; i < count; i++) {
      entries.add(new PieEntry(((Math.random() * range) + range / 5), this.parties[i % this.parties.length]))
    }
    //        entries.add(new PieEntry(4,'Party A'))
    //        entries.add(new PieEntry(2,'Party B'))
    //        entries.add(new PieEntry(5,'Party C'))
    //        entries.add(new PieEntry(3,'Party D'))
 
    let dataSet: PieDataSet = new PieDataSet(entries,
     "Election Results");
    dataSet.setDrawIcons(false);
    dataSet.setSliceSpace(3);
    dataSet.setIconsOffset(new MPPointF(0, 40));
    dataSet.setSelectionShift(5);
 
    // add a lot of colors
    let colors: JArrayList<number> = new JArrayList();
    for (let index = 0;
    index < ColorTemplate.VORDIPLOM_COLORS.length; index++) {
      colors.add(ColorTemplate.VORDIPLOM_COLORS[index]);
    }
 
    for(let index =0;
    index < ColorTemplate.JOYFUL_COLORS.length; index++){
      colors.add(ColorTemplate.JOYFUL_COLORS[index]);
}
 
for(let index =0;
    index < ColorTemplate.COLORFUL_COLORS.length; index++){
      colors.add(ColorTemplate.COLORFUL_COLORS[index]);
}
for(let index =0;
    index < ColorTemplate.LIBERTY_COLORS.length; index++){
      colors.add(ColorTemplate.LIBERTY_COLORS[index]);
}
for(let index =0;
    index < ColorTemplate.PASTEL_COLORS.length; index++){
      colors.add(ColorTemplate.PASTEL_COLORS[index]);
}
    colors.add(ColorTemplate.getHoloBlue());
    dataSet.setColorsByList(colors);
returnnewPieData(dataSet)
}

3.添加數(shù)據(jù)到自定義曲線圖表組件

build() {
    Column() {
      PieChart({
        model: this.pieModel
      }) 
}

圖表四：雷達圖

1.導入RadarChart自定義組件：

import { RadarChart } from '@ohos/ohos_mpchart';

2.初始化數(shù)據(jù)

width: number = 300; //表的寬度
  height: number = 300 //表的高度
  minOffset: number = 5; //X軸線偏移量
  xAxis: XAxis = new XAxis(); //頂部X軸
  yAxis: YAxis = new YAxis();
  data:RadarData= new RadarData();
  @State
  radarChartMode:RadarChartMode=new RadarChartMode();
public aboutToAppear() {
    this.model.menuItemArr = this.menuItemArr
    this.model.title = this.title
 
    this.data=this.initRadarData( 5,50)
    this.xAxis.setTextSize(9);
    this.xAxis.setYOffset(0);
    this.xAxis.setXOffset(0);
    this.xAxis.setTextColor(Color.White);
    const mActivities:string[] = ["Burger", "Steak", "Salad", "Pasta", "Pizza"];
    this.xAxis.setValueFormatter(new
    class RadarAxisValueFormatter
    implements IAxisValueFormatter{
      public  getFormattedValue( value:number,
        axis:AxisBase):string {
        return mActivities[value % mActivities.length];
      }
    });
    this.xAxis.longest=mActivities[0];
    this.yAxis.setLabelCount(5, false);
    this.yAxis.setTextSize(9);
    this.yAxis.setAxisMinimum(0);
    this.yAxis.setAxisMaximum(80);
    this.yAxis.setDrawLabels(false);
 
    this.radarChartMode.mRotateEnabled=false
    this.radarChartMode.setYExtraOffset(this.model.height)
    this.radarChartMode.setXAxis(this.xAxis)
    this.radarChartMode.setYAxis(this.yAxis)
    this.radarChartMode.setWidth(this.width)
    this.radarChartMode.setHeight(this.height)
    this.radarChartMode.setMinOffset(this.minOffset)
    this.radarChartMode.setData(this.data)
    this.radarChartMode.setPaddingLeft(30)
    this.radarChartMode.setPaddingTop(100)
    this.radarChartMode.init();
    //this.animate('Animate XY')
  }
 
  private initRadarData(count: number,
  range: number): RadarData {
    let mul:number = 80;
    let min:number = 20;
    let cnt:number =5;
let entries1 =newJArrayList<RadarEntry>();
let entries2 =newJArrayList<RadarEntry>();
 
//NOTE: The order of the entries when being added to the entries array determines their position around the center of
// the chart.
for(let i =0; i < cnt; i++){
letval1:number = Math.random()* mul + min;
      entries1.add(newRadarEntry(val1));
 
letval2:number = Math.random()* mul + min;
      entries2.add(newRadarEntry(val2));
}
letset1:RadarDataSet =newRadarDataSet(entries1,
"Last Week");
    set1.setColorByColor(0xb4676e81);
    set1.setFillColor(0xb4676e81);
    set1.setDrawFilled(true);
    set1.setFillAlpha(180);
    set1.setLineWidth(2);
    set1.setDrawHighlightCircleEnabled(true);
    set1.setDrawHighlightIndicators(false);
    set1.setHighlightCircleStrokeColor(0xffffffff);
    set1.setHighlightCircleFillColor(0xb4676e81)
    set1.setDrawValues(true)
    set1.setIconsOffset(newMPPointF(0,px2vp(0)));
 
letset2:RadarDataSet =newRadarDataSet(entries2,"This Week");
    set2.setColorByColor(0xb479a2af);
    set2.setFillColor(0xb479a2af);
    set2.setDrawFilled(true);
    set2.setFillAlpha(180);
    set2.setLineWidth(2);
    set2.setDrawHighlightCircleEnabled(true);
    set2.setDrawHighlightIndicators(false);
    set2.setHighlightCircleStrokeColor(0xffffffff);
    set2.setHighlightCircleFillColor(0xb479a2af)
    set2.setDrawValues(true)
    set2.setIconsOffset(newMPPointF(0,px2vp(0)));
 
let sets =newJArrayList<IRadarDataSet>();
    sets.add(set1);
    sets.add(set2);
//
letdata:RadarData =newRadarData(sets);
    data.setValueTextSize(8);
    data.setDrawValues(this.isDrawValuesEnable);
    data.setValueTextColor(Color.White);
return data
}
  public getFormattedValue(value: number): string {
    var str =String(value.toFixed(1)).split(".");
if(str[1]=="0"){
return str[0];
}else{
returnString(value.toFixed(1))
}
}

3.添加數(shù)據(jù)到自定義曲線圖表組件

build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        RadarChart({
          radarChartMode:this.radarChartMode,
        })
      }
    }
  }

其他圖表使用方式與以上圖表使用方法基本一致

寫在最后

• 如果你覺得這篇內(nèi)容對你還蠻有幫助，我想邀請你幫我三個小忙：
• 點贊，轉(zhuǎn)發(fā)，有你們的 『點贊和評論』，才是我創(chuàng)造的動力。
• 關(guān)注小編，同時可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識。
• 想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu