HarmonyOS 鸿蒙Next Polyline折线组件-怎么添加x轴坐标和y轴坐标

HarmonyOS 鸿蒙Next Polyline折线组件-怎么添加x轴坐标和y轴坐标 如下代码,想给对应的点的x轴和y轴坐标,在边界线上显示出来,有什么办法吗~

@Entry
@Component
struct PlayLinePage_3 {
  build() {
    Column({ space: 10 }) {
      // 在 300 * 300 的矩形框中绘制一段折线
      Polyline({ width: 300, height: 300 })
        .points([[20, 60], [100, 100], [150, 80], [180, 90], [240, 180]])
        .fillOpacity(0)
        .stroke(Color.Blue)
        .strokeWidth(2)
        .backgroundColor('#c0c0c0')
        .margin({ top: 20 })
    }.width('100%')
  }
}

类似这种:


更多关于HarmonyOS 鸿蒙Next Polyline折线组件-怎么添加x轴坐标和y轴坐标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

cke_743.png

更多关于HarmonyOS 鸿蒙Next Polyline折线组件-怎么添加x轴坐标和y轴坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是个好办法,俺去试试,感谢感谢，

坐标系

cke_536.png

用Shape组件，可以在一个坐标系下画多个图

那坐标系怎么画，坐标系的值怎么传进去，

如果需要的是类似这种，需要IDE的版本在4.0以上，SDK是API10

好的,那然后呢~这样就可以使用哪些三方库了嘛，

三方库的话可以用，但是4.0可以用PolyLine绘制，

PolyLine绘制的不能满足我的需求，我想要画x轴y轴，它没有接口可以实现这个需求。

在HarmonyOS中，Polyline折线组件用于绘制折线图。要为Polyline组件添加x轴和y轴坐标，可以使用CoordinateSystem和Polyline组件的属性来实现。

  1. CoordinateSystem：用于定义坐标系，包括x轴和y轴的范围。

    • xAxis：定义x轴的最小值和最大值。
    • yAxis：定义y轴的最小值和最大值。

  2. Polyline：用于绘制折线，points属性用于定义折线的各个点的坐标。

示例代码：

import { CoordinateSystem, Polyline } from '@ohos.agp.components';

// 创建坐标系
const coordinateSystem = new CoordinateSystem({
  xAxis: { min: 0, max: 10 },
  yAxis: { min: 0, max: 10 }
});

// 创建折线
const polyline = new Polyline({
  points: [
    { x: 1, y: 2 },
    { x: 3, y: 4 },
    { x: 5, y: 6 }
  ]
});

// 将折线添加到坐标系中
coordinateSystem.addChild(polyline);

在上述代码中，CoordinateSystem定义了x轴和y轴的范围，Polyline的points属性定义了折线的各个点的x和y坐标。

回到顶部