【鸿蒙实战开发】HarmonyOS 高级图表实现解决方案

方案描述

mpchart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI,mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。

使用准备

  1. 下载三方库控制台输入:ohpm install @ohos/mpchart。

  2. 初始化图表配置构建类。

初始化三方库得构建类,图表数据,线性数据等。

import { LineChart, LineChartModel } from '@ohos/mpchart'; // 初始化图表配置构建类 
import { XAxis, XAxisPosition } from '@ohos/mpchart'; // x轴 
import { YAxis, AxisDependency, YAxisLabelPosition } from '@ohos/mpchart'; // Y轴 
import { LineData } from '@ohos/mpchart'; // 生成图表数据 
import { LineDataSet, Mode } from '@ohos/mpchart'; //线形图数据集合 
import { EntryOhos } from '@ohos/mpchart'; //图表数据结构基础类
  1. 配置图表指定样式。

注:此步骤是初始化底层的表框架,也是就后面的网格。

图表生成分为x、y轴。

setPosition设置:

x轴(getXAxis)得显示范围:TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE,x轴只需要设置一次即可。

y轴(getAxisLeft,getAxisRight)表内左右显示范围:OUTSIDE_CHART, INSIDE_CHART,如需只设置一侧,创建实例时,添加属性添加所需侧即可。

let topAxis = this.model.getXAxis();//图表x轴 
if (topAxis) { 
  topAxis.setLabelCount(5, false);//设置绘制标签个数 
  topAxis.setPosition(XAxisPosition.TOP);//设置标签位置 
  topAxis.setAxisMinimum(0); //设置最小值 
  topAxis.setAxisMaximum(50); //设置最大值 
  topAxis.setDrawAxisLine(false)// 启用绘制x轴轴线 
  topAxis.setDrawLabels(false) // 不绘制x轴标签 
  topAxis.setDrawGridLines(false)// 不绘制X轴网格线 
} 

let leftAxis = this.model.getAxisLeft(); 
if (leftAxis) { 
  leftAxis = new YAxis(AxisDependency.LEFT); 
  leftAxis.setLabelCount(6, false); 
  leftAxis.setDrawGridLines(true);//启用绘制左侧Y轴网格线 
  leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); 
  leftAxis.setAxisMinimum(0); 
  leftAxis.setAxisMaximum(50); 
  leftAxis.setDrawLabels(true); 
  leftAxis.setDrawGridLines(true); 
} 

let rightAxis = this.model.getAxisRight(); 
if (rightAxis) { 
  rightAxis = new YAxis(AxisDependency.RIGHT); 
  rightAxis.setDrawGridLines(true); 
  rightAxis.setLabelCount(6, false); 
  rightAxis.setAxisMinimum(0); 
  rightAxis.setAxisMaximum(50); 
  rightAxis.setDrawAxisLine(false); 
  rightAxis.setDrawLabels(true); 
  rightAxis.setDrawGridLines(true); 
} 

this.model.setData(this.lineData);

应用场景

解决方案:mpchart
场景一:线性表虚实线交接【曲线】
实现效果
图1-1

image.png

核心代码

我们需要写一个MyLineDataSet类,继承自LineDataSet,也就是线型图的数据类。为什么需要这个类呢?因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值