更新时间:2024-09-18 GMT+08:00
分享

设置AstroZero高级页面基本折线图组件属性

基本折线图是折线图的一种,用于实现折线图图表统计。

图1 设置基本折线图属性

基础

  • 组件标题:设置组件的标题,用于在高级页面显示。
  • 组件名称:设置组件的名称,名称是该组件在页面中的唯一标识。

位置

  • 距离左端:组件到页面左侧的距离,单位为px。
  • 距离顶端:组件到页面顶部的距离,单位为px。
  • 宽度:组件的宽度,单位为px。
  • 高度:组件的高度,单位为px。
  • 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。
  • 自适应高度:组件的高度是否随宽度改变。
  • 开启:勾选该按钮,下方可见页面适配功能。
  • 页面适配:勾选页面适配下方的“开启”,表示组件开启自适应高度。该属性使页面其它位于其下方的组件,根据该组件的高度变化自动调整位置,一个页面只支持一个组件。

边框

设置组件的边框样式,支持全边框和角边框两种。

  • 全边框
    • 样式:设置组件边框的样式,如实线、点线、虚线和双实线。
    • 宽度:设置边框的宽度,单位px。
    • 颜色:设置组件边框的颜色。
    • 弧度:设置组件边框四个角的弧度,单位px。
  • 角边框
    • 宽度:设置组件边框的宽度,单位px。
    • 长度:设置组件边框的长度,单位px。
    • 颜色:设置组件边框的颜色。
    • 弧度:设置组件边框四个角的弧度,单位px。
    • 边距:设置组件边框和图表之间的间距,单位px。

背景

  • 样式:设置背景的样式,如普通、居中、拉伸等。
  • 图片链接:为轮播组件添加图片,当前仅支持添加JPG、JPEG、PNG和GIF格式的图片,且每张图片的大小不能超过50MB,尺寸建议使用800 x 800像素。
  • 颜色:设置组件的背景颜色。

高级设置

选中基本折线图组件,单击鼠标右键选择“高级设置”,可对折线图进行多种配置。

图2 基本折线图效果图
  • 参考配色模板:系统提供了三种可选基本折线图模板,单击即可切换样式。可选择某一模板重置,也可通过设置各配置项得到想要的效果。
  • 数据系列:对每个数据系列(折线颜色、折线宽度、折线透明度、拐点颜色,区域颜色、最大值最小值标注和平均值标线等)进行一系列配置。数据系列配置可参考设置数据系列。单击“+”,可添加数据系列。
    • 线条颜色:选项为“单色”或“渐变色”。选择颜色可改变线条的颜色。
    • 折线宽度:折线的宽度。
    • 折线不透明度:折线的不透明度设置,取值为“0”时折线全透明(即隐藏),“100”为全部显示。
    • 折线平滑显示:折线是否平滑显示。
    • 拐点颜色:折线上圆拐点的颜色。
    • 拐点大小:折线上圆拐点的大小。
    • 拐点不透明度:折线上圆拐点的不透明度设置,取值为“0”时全透明(即隐藏),“100”为全部显示。
    • 区域颜色:具体数据系列下区域的颜色。
    • 数据显示:折线旁是否显示数值,开启后还可数值颜色。
    • 最大值:是否显示该数据系列数值的最大值。
    • 最小值:是否显示该数据系列数值的最小值。
    • 平均值:是否显示该数据系列数值的平均值。
  • X轴:X轴配置。
    • X轴标题:X轴标题设置,可设置X轴标题的文本内容、文本颜色、文字大小、标题与轴间距。
    • 轴线设置:是否显示轴线、是否显示刻度、轴线颜色及轴文本颜色设置。
    • 网格线:是否显示轴网格线、轴网格线的类型和颜色设置。
    • 柱外间距:是否显示柱外间距。
    • 标签展示:字数过多是否换行及字数过多是否省略。X轴标签取值来源于数据模型中“dataX”字段取值。
    • 刻度标签间隔:刻度标签是否间隔展示,关闭后显示所有标签。
    • 刻度标签旋转的角度:刻度标签旋转角度设置。
  • Y轴:Y轴配置。
    • Y轴标题:Y轴标题设置,可设置X轴标题的文本内容、文本颜色、文字大小、标题与轴间距。
    • 坐标轴最小间隔大小:坐标轴最小间隔大小,例如间隔500,则Y轴就是0、500、1000、1500依次间隔500进行分隔。
    • 轴线设置:包括是否显示轴线、是否显示刻度、轴线颜色及轴文本颜色设置。
    • 柱形阴影:是否显示柱形阴影、阴影颜色及是否显示数据。
    • 网格线:是否显示轴网格线、轴网格线的类型和颜色设置。
    • 阈值线设置:打开“开启阈值线”后,可设置阈值数量和阈值。
  • 标题:设置组件标题,可设置标题的文本内容、文本位置、背景色、文本颜色、文本大小。
  • 图例:设置图例,支持设置图例小图标、图例左侧边距、图例上侧边距。图例文字内容来源于数据模型“dataValue”中“title”取值。
  • 公共配置 > 显示总量:打开后,会显示数据总量。
  • 图表背景:设置图表的背景,支持设置背景的颜色、四边圆角(取值为“0”时为直角,“100”为圆角)。

相关文档