HarmonyOS 鸿蒙Next开发，使用ArkTs框架，API10，stage模型。如果想用lightweight-charts等web js框架来画图表，能用吗？怎么用

HarmonyOS 鸿蒙Next开发，使用ArkTs框架，API10，stage模型。如果想用lightweight-charts等web js框架来画图表，能用吗？怎么用 鸿蒙开发，使用ArkTs框架，API10，stage模型。如果想用 lightweight-charts 等web js 框架来画图表。能用吗？怎么用

4 回复

开发者您好，针对您提出的“鸿蒙开发，使用ArkTs框架，API10，stage模型。如果想用 lightweight-charts 等web js 框架来画图表。能用吗？怎么用”这个问题，请参考如下内容:

mpchart

简介

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

效果展示：

安装教程

ohpm install @ohos/mpchart

OpenHarmony npm环境配置等更多内容，请参考 如何安装OpenHarmony npm包 。

使用说明

开启最小单元刷新（局部刷新）

在项目的entry目录下的modele.json5的module属性里加上如下代码:

"metadata": [
    {
        "name": "ArkTSPartialUpdate",
        "value": "true"
    }
]
曲线图
  1. 声明数据对象,以demo中Basic为例:
topAxis: XAxis = new XAxis(); //顶部X轴
bottomAxis: XAxis = new XAxis(); //底部X轴
mWidth: number = 350; //表的宽度
mHeight: number = 300; //表的高度
minOffset: number = 15; //X轴线偏移量
leftAxis: YAxis | null = null;
rightAxis: YAxis | null = null;
lineData: LineData | null = null;

@State
lineChartModel: LineChartModel = new LineChartModel();
  1. 初始化数据
public aboutToAppear() {
    this.titleModel.menuItemArr = this.menuItemArr
    this.titleModel.title = this.title
    this.lineData = this.initCurveData(45, 180);
    this.topAxis.setLabelCount(5, false);
    this.topAxis.setPosition(XAxisPosition.TOP);
    this.topAxis.setAxisMinimum(0);
    this.topAxis.setAxisMaximum(44);
    this.bottomAxis.setLabelCount(5, false);
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(44);
    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);
    this.rightAxis.setDrawLabels(false);
    let upperLimtLine:LimitLine= new LimitLine(150, "Upper Limit");
    upperLimtLine.setLineWidth(4);
    upperLimtLine.enableDashedLine(5, 5, 0);
    upperLimtLine.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
    upperLimtLine.setTextSize(10);
    let 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);

    this.lineChartModel.setTopAxis(this.topAxis);
    this.lineChartModel.setBottomAxis(this.bottomAxis);
    this.lineChartModel.setWidth(this.mWidth);
    this.lineChartModel.setHeight(this.mHeight);
    this.lineChartModel.setMinOffset(this.minOffset);
    if (this.leftAxis) {
        this.lineChartModel.setLeftAxis(this.leftAxis);
    }
    if (this.rightAxis) {
        this.lineChartModel.setRightAxis(this.rightAxis);
    }
    if (this.lineData) {
        this.lineChartModel.setLineData(this.lineData);
    }
    this.lineChartModel.init();
}
  1. 添加数据到自定义曲线图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        LineChart({lineChartModel: this.lineChartModel})
    }
}
柱形图
  1. 竖向柱形图初始化数据
aboutToAppear(){
    this.leftAxis = new YAxis(AxisDependency.LEFT);
    this.leftAxis.setLabelCount(11, false);
    this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
    this.leftAxis.setSpaceTop(15);
    this.leftAxis.setAxisMinimum(0);
    this.leftAxis.setAxisMaximum(100);
    this.leftAxis.enableGridDashedLine(10,10,0)
    this.rightAxis = new YAxis(AxisDependency.RIGHT);
    this.rightAxis.setDrawGridLines(false);
    this.rightAxis.setLabelCount(7, false);
    this.rightAxis.setSpaceTop(11);
    this.rightAxis.setAxisMinimum(0); // this replaces setStartAtZero(true)
    this.rightAxis.setAxisMaximum(100);
    this.bottomAxis.setLabelCount(6, false);
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(12);
    this.setData(this.bottomAxis.getAxisMaximum(),this.leftAxis.getAxisMaximum())
    this.model.mWidth = this.mWidth;
    this.model.mHeight = this.mHeight;
    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();
}
  1. 添加数据到自定义竖向柱形图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        BarChart({model:this.model})
    }
}
横向柱形图初始化数据
aboutToAppear(){
    this.leftAxis = new YAxis(AxisDependency.LEFT);
    this.leftAxis.setLabelCount(11, false);
    this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
    this.leftAxis.setSpaceTop(15);
    this.leftAxis.setAxisMinimum(0);
    this.leftAxis.setAxisMaximum(12);
    this.leftAxis.enableGridDashedLine(10,10,0)
    this.topAxis.setLabelCount(6, false);
    this.topAxis.setPosition(XAxisPosition.TOP);
    this.topAxis.setAxisMinimum(0);
    this.topAxis.setAxisMaximum(100);
    this.bottomAxis.setLabelCount(6, false);
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(100);
    this.setData(this.leftAxis.getAxisMaximum(),this.bottomAxis.getAxisMaximum())
    this.model.mWidth = this.mWidth;
    this.model.mHeight = this.mHeight;
    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.setTopXAxis(this.topAxis);
    this.model.setBottomXAxis(this.bottomAxis)
    this.model.mRenderer.initBuffers();
    this.model.prepareMatrixValuePx();
}
  1. 添加数据到自定义横向柱形图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        BarChart({model:this.model})
    }
}
瀑布图
  1. 瀑布图初始化数据
public aboutToAppear(){
    this.titleModel.menuItemArr = this.menuItemArr
    this.titleModel.title = this.title
    this.leftAxis = new YAxis(AxisDependency.LEFT);
    this.leftAxis.setLabelCount(7, false);
    this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
    this.leftAxis.setSpaceTop(15);
    this.leftAxis.setAxisMinimum(40);
    this.leftAxis.setAxisMaximum(200);
    this.leftAxis.enableGridDashedLine(10,10,0)
    this.rightAxis = new YAxis(AxisDependency.RIGHT);
    this.rightAxis.setDrawGridLines(false);
    this.rightAxis.setLabelCount(7, false);
    this.rightAxis.setSpaceTop(11);
    this.rightAxis.setAxisMinimum(40); // this replaces setStartAtZero(true)
    this.rightAxis.setAxisMaximum(200);
    this.bottomAxis.setLabelCount(7, false);
    this.bottomAxis.setPosition(XAxisPosition.BOTTOM);
    this.bottomAxis.setAxisMinimum(0);
    this.bottomAxis.setAxisMaximum(7);
    this.setData(this.bottomAxis.getAxisMaximum(),this.leftAxis.getAxisMaximum())
    this.model.setWidth(this.mWidth);
    this.model.setHeight(this.mHeight);
    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();
    this.model.setCustomCylinderWidth(20);
    this.model.setRadius(10);
    this.model.setCylinderCenter(true)
}
  1. 添加数据到瀑布图表组件
build() {
    Column(){
        Stack({alignContent:Alignment.TopStart}){
            WaterfallChart({model:this.model})
        }
    }.alignItems(HorizontalAlign.Start)
}
饼状图
  1. 饼状图初始化数据
aboutToAppear() {
    this.pieData = this.initPieData(4, 10);
    this.pieModel.setDrawAngles([80,40,140,100])
    .setPieData(this.pieData)
    .setRadius(500)
    .setHoleRadius(0.5)
}
  1. 添加数据到自定义饼状图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        PieChart({
            model:this.pieModel
        })
    }
}
气泡图
  1. 气泡图初始化数据
topAxis: XAxis = new XAxis(); //顶部X轴
bottomAxis: XAxis = new XAxis(); //底部X轴
mWidth: number = 300; //表的宽度
mHeight: number = 300; //表的高度
minOffset: number =15; //X轴线偏移量
leftAxis: YAxis = new YAxis();
rightAxis: YAxis = new YAxis();
data:BubbleData= new BubbleData();
isDrawValuesEnable:boolean=false;
@State
bubbleChartMode:BubbleChartMode=new BubbleChartMode();
  1. 添加数据到自定义气泡图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        BubbleChart({
            bubbleChartMode:$bubbleChartMode
        })
    }
}
candleStick蜡烛图
  1. candleStick蜡烛图初始化数据
@State chartModel: CandleStickChart.Model = new CandleStickChart.Model()
  1. 添加数据到自定义candleStick蜡烛图表组件
build() {
    Stack({ alignContent: Alignment.TopStart }) {
        CandleStickChart({ model: $chartModel })
    }
}
ScatterChart散点图
  1. ScatterChart散点图初始化数据
@State
scaterChartMode: ScaterChartMode = new ScaterChartMode();
  1. 添加数据到自定义scaterChartMode散点图表组件
build() {
    ScatterChart({
        scaterChartMode: this.scaterChartMode
    })
}

接口说明

let values = new JArrayList<Number>();
  • 添加数据 values.append(element:T)
  • 移除数据 values.remove(element:T)
  • 获取数据 values.get(pos:number)
  • 清除数据 values.clear()
let barEntry=new BarEntry(35, [-17, 17]);
  • 复制对象 barEntry.copy()
  • 设置Y轴数组 barEntry.setVals(vals: number[])
  • 是否层叠 barEntry.isStacked()
  • 计算Y轴最小值 barEntry.calcYValsMin()
  • 计算Y轴范围 barEntry.calcRanges()
let paint : Paint = new Paint();
  • 设置颜色 paint.setColor(value: Color | number | string | Resource)
  • 设置文字大小 paint.setTextSize(value: number)
  • 社会填充 paint.setFill(value: Color | number | string | Resource)
  • 设置边框颜色 paint.setStroke(value: Color | number | string | Resource)
  • 设置透明度 paint.setAlpha(value: number)
let set1:BubbleDataSet = new BubbleDataSet(values1, "DS 1");
  • 设置是否需要绘制图标 set1.setDrawIcons(false)
  • 设置绘制颜色 set1.setColorByColor(0x88c12552);
  • 设置图标偏移距离 set1.setIconsOffset(new MPPointF(0, px2vp(0)))
  • 设置是否绘制值 set1.setDrawValues(true);
let set1: ScatterDataSet = new ScatterDataSet(values, "DS 1");
  • 设置绘制形状 set1.setScatterShape(ScatterShape.SQUARE)
  • 设置绘制半径 set1.setScatterShapeHoleRadius(3);
  • 设置绘制图形大小 set1.setScatterShapeSize(8);
let topAxis: XAxis = new XAxis();
  • 设置轴文字label数量 topAxis.setLabelCount(6, false);
  • 设置轴文本位置 topAxis.setPosition(XAxisPosition.TOP)
  • 设置最小值 topAxis.setAxisMinimum(10)
  • 设置最大自值 topAxis.setAxisMaximum(50)
  • 设置网格线虚线间隔 topAxis.enableGridDashedLine(10,10,0)
let model:HorizontalBarChartModel = new HorizontalBarChartModel();
  • 初始化数据 model.init();
  • 计算值数据 model.prepareMatrixValuePx()
  • 设置最大显示label数量 model.setMaxVisibleValueCount(count: number)
  • 设置描述对象 model.setDescription(desc: Description)
  • 设置左侧Y轴 model.setLeftYAxis(axis:YAxis)
  • 设置底部X轴 model.setBottomXAxis(axis:XAxis)
let rect: MyRect = new MyRect();
  • 复制对象 rect.copyOrNull(r: MyRect);
  • 对比对象 rect.equals(o: Object):
  • 计算宽度 rect.width()
  • 计算高度 rect.height()
  • 计算中心点X轴值 rect.centerX()
  • 计算中心点Y轴值 rect.centerY()
let data: BarData = new BarData(dataSets);
  • 设置圆柱的宽度 data.setBarWidth(0.5);

更多关于HarmonyOS 鸿蒙Next开发，使用ArkTs框架，API10，stage模型。如果想用lightweight-charts等web js框架来画图表，能用吗？怎么用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以使用这个vchart图表，比较成熟了
[@visactor%2Fharmony-vchart](https://ohpm.openharmony.cn/#/cn/detail/@visactor%2Fharmony-vchart)

可以看看我这篇：https://developer.huawei.com/consumer/cn/forum/topic/0203141516388316210?fid=0101591351254000314

在HarmonyOS鸿蒙Next开发中，使用ArkTS框架和API10的Stage模型，可以通过Web组件来集成lightweight-charts等Web JS框架来绘制图表。具体步骤如下：

  1. 创建Web组件：在ArkTS中，使用Web组件来嵌入Web页面。你可以在布局文件中定义Web组件，或者在代码中动态创建。

  2. 加载Web页面：将lightweight-charts的HTML、CSS和JavaScript文件打包到应用的resources目录中，或者通过远程URL加载。使用Web组件的loadUrl或loadData方法来加载这些资源。

  3. 与ArkTS交互：通过Web组件的JavaScriptInterface或postMessage方法与ArkTS代码进行通信。你可以在ArkTS中定义回调函数，处理来自Web页面的数据或事件。

  4. 绘制图表：在Web页面中使用lightweight-charts的API来创建和更新图表。你可以通过ArkTS传递数据给Web页面，动态更新图表内容。

  5. 处理生命周期：在Stage模型中，注意处理Web组件的生命周期，确保在页面销毁时释放资源，避免内存泄漏。

通过以上步骤，你可以在鸿蒙Next应用中集成lightweight-charts等Web JS框架来绘制图表。

回到顶部