跳到主要内容

示例image.png

组件操作

视频中VS Code组件用到的代码

import suanpan
from suanpan.app import app
from runtime import autoLoadSave
import numpy as np
import json

@app
@autoLoadSave
def main(args):
    # 获取输入端口数据方式:
        # 输入端口1： args.inputData1;
        # 输入端口2： args.inputData2...
        # 注：请在节点输入桩具体类型中配置数据类型，或自行转换
    # 发送至输出端口数据方式:
        # 单输出： return result
        # 多输出端口： {"out1": result1, "out2": result2...}
        # 发送某个端口：{"out2": result}
        # 注：请在节点输出桩具体类型中配置数据类型，否则下游节点可能会报错！
    # 获取参数列表参数值方式: args.param1, args.param2...args.param20
        # 注：默认载入的参数值为string, 如需转换请自行适配, 例如: int(args.param1)
    # 在此处编辑用户自定义代码
    result = args.inputData1
    splitor = ','
    if result.index(';') > 0:
        splitor = ';'

    arr = result.split(splitor)

    start = int(arr[0])
    end = int(arr[1])

    x = np.linspace(start, end)
    y = [10 ** el for el in x]
    z = [2 * el for el in x]

    data = [["x", "y", "z"]]

    for index in range(len(x)):
        data.append([x[index], y[index], z[index]])

    return json.dumps(data)


if __name__ == "__main__":
    suanpan.run(app)

参数设置

a8d3db82-c402-47c7-af60-c0a48f87a4aa.png

基础设置​

  • 容器边距：图表距离容器左、上、右、下方的距离。为英文逗号分隔的数字、百分比。如上图中 20,40,40,40 即图表距离容器左侧20像素，上、右和下均40像素。若为 20,10%,40,40 则表示距离左侧20像素、右侧10%，下和右为40像素。
  • 字体大小：图表中的字体大小，包括图例、坐标轴刻度、鼠标悬停信息等。
  • 字体颜色：图表中的字体的颜色，包括图例、坐标轴刻度、鼠标悬停信息等。
  • 图表色系：图表中各个系列线条的颜色。对数图组件仅一个系列。

名称设置​

  • 图表名称：字符串，图表名称。如 示例图 中的 "对数一: y=x**10"。
  • 名称位置：名称在容器中的位置。共2个键值对，一个键值对表示水平方向的位置，另一个键值对表示垂直方向的位置。
    • 水平方向：键可以是 left 或 right，值可以是 left、center、right 或者 数字、百分比。
    • 垂直方向：键可以是 top或 bottom，值可以是 top、center、bottom或者 数字、百分比。
  • 名称颜色：名称的字体颜色。

图例设置​

  • 图例设置：“无、水平、垂直”三个选项。默认“水平”
    • 无：不显示图例。选择“无”时，图例位置、图例映射的设置不生效。
    • 水平：图例水平方向排列。
    • 垂直：图例垂直方向排列。
  • 图例位置：位置设置同“名称位置”。
  • 图例映射：字符串。如下图所示
    • 设置前：image.png
    • 设置后：image.png

数据维度​

上游输入的数据或静态数据是二维数组。至少有两列，一列为X轴数据，另一列为Y轴数据。数据维度是只数据所在列的索引。

  • X轴数据维度：> 或 = 0 的数字。默认为 0，即第一列数据。
  • Y轴数据维度：> 或 = 0 的数字。默认为 1，即第二列数据。

X轴设置​

  • X轴名称：
  • X轴类型：可以选择“类目轴”或“数据轴”，默认为类目轴。
  • X轴刻度线：是否显示X轴的刻度线，默认显示。
  • X轴分割线：是否显示X轴的分割线，默认不显示。
  • X轴标签旋转：X轴刻度标签的旋转角度，默认不旋转。
  • image.png

Y轴设置​

  • Y轴名称：
  • Y轴类型：选项“对数轴、数据轴”，默认“对数轴”。
    • 对数轴：设为对数轴时，“Y轴标签类型”为“乘方”时，Y轴的标签才能显示为底数的N次幂格式，如示例图一、三；
    • 数据轴：设置数据轴时，“Y轴标签类型”为“指数计数法”时，Y轴的标签才能显示为 示例图二 中所示；
  • 对数轴底数：选项为“10、2”，默认10。表示Y轴标签的底数。仅在Y轴类型为“对数轴”时有效。
  • Y轴标签类型：可选“默认、乘方、指数计数法”，默认“乘方”。配合“Y轴类型”选项设置。
  • Y轴最小刻度：控制Y轴的最小刻度是否显示为Y轴数据的最小值。默认否。
  • Y轴最大刻度：控制Y轴的最大刻度是否显示为Y轴数据的最值大。默认否。
  • Y轴分隔间隔：设置一个数值，控制Y轴每个刻度之间间隔多少。
  • Y轴单位：一般表示Y轴数据的单位，追加在Y轴标签后。如下面示例同中的°
  • Y轴刻度线：是否显示Y轴的刻度线。默认显示。
  • Y轴轴线：是否显示Y轴的轴线。默认显示。
  • Y轴分割线：是否显示Y轴的分割线。默认显示。

Y轴数据维度为2时，设置如下参数后，显示为： image.png

坐标轴样式​

  • 次分割线：是否显示Y轴的次分割线。
  • 坐标轴颜色：设置坐标轴的颜色。
  • 坐标轴线宽：设置坐标轴的线宽。
  • 分割线类型：选项“实线、虚线、点线”，默认“虚线”。设置分割线的类型。

线条样式​

  • 平滑：控制连线是否平滑。
  • 线宽：一个数值，单位是像素。控制线条的宽度。
  • 区域填充：选项“无填充、渐变填充、纯色填充”，默认“无填充”。渐变和纯色填充示例如下
    • 渐变填充：image.png
    • 纯色填充：image.png
  • 节点：节点的类型选项，其中“无”表示不设置节点。默认“空心圆”。
  • 节点大小：节点的大小，若节点设置为“无”，则节点大小的设置无效。

其他设置​

  • 放大镜开始(%)：一个数值，单位是%，表示图表左侧的开始数据是所有数据的第百分之几条，默认0，表示第一条数据。如上图默认数据中，若放大镜开始为50%，则图表默认显示的X轴第一个数据是“three”。
  • 放大镜结束(%)：一个数值，单位是%，表示图表右侧的结束数据是所有数据的第百分之几条，默认100，最后一条数据。如上图默认数据中，若放大镜开始为0，结束为50%，则图表默认显示的X轴第一条数据是“one”，最后一条数据是“three”。在图表中滑动滚轮可以放大或缩小放大镜，若放大镜显示了部分数据，按住鼠标左键拖动可以左右移动放大镜。
  • 示例数据：点击“查看”后下载默认数据的csv文件。