简介

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环境配置等更多内容，请参考安装教程

如何安装OpenHarmony npm包

https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md

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(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.添加数据到自定义曲线图表组件

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.初始化数据

@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.添加数据到自定义曲线图表组件

build() {

    Stack(){

      BarChart({model:this.model})

    }

  }

　　

图表三：饼状图

1.导入PieChart自定义组件：

import { PieChart } from '@ohos/ohos_mpchart'

　　

2.初始化数据

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.添加数据到自定义曲线图表组件

build() {

    Column() {

      PieChart({

        model: this.pieModel

      })

}

　　

图表四：雷达图

1.导入RadarChart自定义组件：

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

　　

2.初始化数据

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.添加数据到自定义曲线图表组件

build() {

    Column() {

      Stack({ alignContent: Alignment.TopStart }) {

        RadarChart({

          radarChartMode:this.radarChartMode,

        })

      }

    }

  }

　　

其他图表使用方式与以上图表使用方法基本一致

Ohos-MPChart——支持多种图表绘制的组件的更多相关文章

  1. Xamarin图表开发基础教程（11）OxyPlot框架支持的图表类型

    Xamarin图表开发基础教程(11)OxyPlot框架支持的图表类型 OxyPlot组件中支持7种类型的条型图表,分别为普通条形图.线型条形图.矩形条形图.差值图.龙卷风图.普通柱形图和柱形误差图, ...

  2. Xamarin图表开发基础教程（10）OxyPlot框架支持的图表类型

    Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型 OxyPlot组件支持26种图表,这些图表按照功能和样式可以分为4大类,分别为线型图表.条型图表.金融图表和其它图表. 线型图表 ...

  3. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  4. 创建支持多种屏幕尺寸的Android应用

    Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...

  5. 创办支持多种屏幕尺寸的Android应用

    创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...

  6. StreamSets学习系列之StreamSets支持多种安装方式【Core Tarball、Cloudera Parcel 、Full Tarball 、Full RPM 、Docker Image和Source Code 】（图文详解）

    不多说,直接上干货! Streamsets的官网 https://streamsets.com/ 得到 https://streamsets.com/opensource/ StreamSets支持多 ...

  7. ym——Android怎样支持多种屏幕

    转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 原文链接:http://developer.android.com/guide/pra ...

  8. Quick BI 支持多种数据源进行多维分析

    一.摘要 随着互联网的高速发展,数据量爆发式增长的同时,数据的存储形式也开始呈现出多样性,有结构化存储,如 Mysql, Oracle, SQLServer 等,半结构化甚至非结构化存储,如HBase ...

  9. Neutron 如何支持多种 network provider - 每天5分钟玩转 OpenStack（70）

    Neutron 的架构是非常开放的,可以支持多种 network provider,只要遵循一定的设计原则和规范.本节我们将开始讨论这个主题. 先讨论一个简单的场景:在 Neutorn 中使用 lin ...

  10. Android ImageCache图片缓存，使用简单，支持预取，支持多种缓存算法，支持不同网络类型，扩展性强

    本文主要介绍一个支持图片自动预取.支持多种缓存算法的图片缓存的使用及功能.图片较大需要SD卡保存情况推荐使用ImageSDCardCache. 与Android LruCache相比主要特性:(1). ...

随机推荐

  1. django项目中使用nginx+fastdfs上传图片和使用图片的流程

    自定义文件存储类 1.先弄清楚django中默认的上传文件存储FileSystemStorage类 https://docs.djangoproject.com/zh-hans/2.2/ref/fil ...

  2. .net+bootstrap写的一个还不错的音乐网站

    以前做的一款设计音乐网站,分享下. 技术用的是.net +sqlserver 大致的样子是这样的. 1.首页如下: 2.播放歌词页面如下:歌词自动滚动,且可悬停. 3.歌单信息页面如下: 详细页面如下 ...

  3. 面试官：Redis如何保证高可用？

    Redis 高可用(High Availability,HA)是指 Redis 通过一系列技术手段确保在面临故障的情况下也能持续提供服务的能力. Redis 作为一个内存数据库,其数据通常存储在内存中 ...

  4. 一分钟带你了解mySql执行SQL的内部原理

    1.把MySQL当个黑盒子一样执行SQL语句 我们知道执行了insert语句之后,在表里会多出来一条数据:执行了update语句之后,会对表里的数据进行更改:执行了delete语句之后,会把表里的一条 ...

  5. cpu过高什么原因?怎么排查？

    运行大型程序或应用程序:当计算机运行大型程序或应用程序时,CPU需要处理更多的数据和指令,因此CPU占用率会相应地增加. 病毒或恶意软件:某些病毒或恶意软件会占用计算机的CPU资源来执行恶意任务,例如 ...

  6. nginx应用及性能调优

    1. Nginx 反向代理实现 说反向代理之前 先说什么是正向代理, 正向代理是指客户端通过 代理服务器访问目标服务器,客户端直接访问代理服务器,在由代理服务器访问目标服务器并返回客户端并返回 . 例 ...

  7. Mybatis中没有返回值的查询方法

    最近在项目开发中发现一件非常有意思的事情,一个Mapper.java文件中有一个查询方法没有返回值,这引起了我的好奇心, 没有返回值查询还有什么用呢? 仔细去看这个Mapper.java文件对应的xm ...

  8. 适用mybatis和jpa的全数据库类型主键生成插件，分布式高并发有序id生成器

    适用mybatis和jpa的全数据库类型主键生成插件,分布式高并发有序id生成器

  9. k8s资源管理之ResourceQuota、LimitRange和QoS

    ResourceQuota ResourceQuota 是 Kubernetes 中的一个资源配额对象,用于限制命名空间(Namespace)中资源的使用量.ResourceQuota 可以限制命名空 ...

  10. 玩转Vue3之shallowRef和shallowReactive

    前言 Vue3 作为一款现代的 JavaScript 框架,引入了许多新的特性和改进,其中包括 shallowRef 和 shallowReactive.这两个功能在Vue 3中提供了更加灵活和高效的 ...