下面提到的 guide 等同于辅助元素

配置方式

Console-Chart 默认不开启绘制任何的辅助元素。 

  1. config.guide = {
  2.   line: {},
  3.   text: {},
  4.   image: {},
  5.   region: {},
  6.   html: {},
  7.   arc: {},
  8.   regionFilter: {},
  9.   dataMarker: {},
  10.   dataRegion: {},
  11. };

配置列表

line

辅助线

  1. guide.line = {
  2.   top: {boolean}, // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  3.   start: {object} | {function} | {array}, // 辅助线起始位置
  4.   end: {object} | {function} | {array}, // 辅助线结束位置
  5.   lineStyle: {object}, // 图形样式配置
  6.   text: {
  7.     position: {string} | {number}, // 文本的显示位置，可取值：'start','center','end', 0 ~ 1 范围的数字, '0%'至'100%'
  8.     autoRotate: {boolean}, // 是否沿线的角度排布，默认为 true
  9.     style: {object}, // 文本图形样式配置
  10.     content: {string}, // 文本的内容
  11.     offsetX: {number}, // x 方向的偏移量
  12.     offsetY: {number} // y 方向的偏移量
  13.   }
  14. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

start: Object|Array|Function

指定辅助线的起始位置，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5.   }

end: Object|Array|Function

配置方法同 start

lineStyle: Object

用于设置辅助线的显示样式。

text: Object

辅助线可以带文本，该属性使用如下：

  1. text: {
  2.   position: 'start' | 'center' | 'end' | '39%' | 0.5, // 文本的显示位置，值除了指定的常量外，还可以是百分比或者小数
  3.   autoRotate: {boolean}, // 指定文本是否沿着线的方向排布，默认为 true，即沿着线排布
  4.   style: {
  5.     fill: 'red',
  6.     fontSize: 12
  7.   }, // 设置文本的显示样式
  8.   content: {string}, // 文本的内容
  9.   offsetX: {number}, // x 方向的偏移量
  10.   offsetY: {number} // y 方向的偏移量
  11. }

text

辅助文本

  1. guide.text = {
  2.   top: {boolean}, // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  3.   position: {object} | {function} | {array}, // 文本的起始位置
  4.   content: {string}, // 显示的文本内容
  5.   style: {object}}}, // 文本的图形样式属性
  6.   offsetX: {number}, // x 方向的偏移量
  7.   offsetY: {number} // y 方向偏移量
  8. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

position: Object|Array|Function

指定辅助文本的显示位置，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. text: {
  2.     position(xScales, yScales) {
  3.       return []; // 位置信息
  4.     },
  5.     content: '最大值'
  6.   }

content: String

辅助文本的显示内容。

style: Object

用于设置辅助文本的显示样式，style 的更详细的配置

offsetX： Number

设置辅助文本 x 方向的偏移量。

offsetY: Number

设置辅助文本 y 方向的偏移量。

image

辅助图片

  1. guide.image = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  3.   start: {array} | {function} | {array}, // 图片起始位置
  4.   end: {array} | {function} | {array}, // 图片结束位置
  5.   width: {number}, // 图片的宽度
  6.   height: {number}, // 图片的高度
  7.   src: {string}, // 图片路径
  8.   offsetX: {number}, // x 方向的偏移量
  9.   offsetY: {number} // y 方向偏移量
  10. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

start: Object|Array|Function

指定辅助图片的起始位置，即图片的左上角，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5.  }

end: Object|Array|Function

可选，指定辅助图片的结束位置，即图片的右下角，该属性用法同 start。当 start 和 end 属性同时声明时，图片的宽度和高度即已确定，此时可以不需要指定 width 和 height 这两个属性

src: String

指定图片的地址，可以是路径，也可以是 base64 编码。

width: Number

当仅指定了 start 属性时使用，用于设置图片的宽度。

height: Number

当仅指定了 start 属性时使用，用于设置图片的高度。

offsetX: Number

设置图片 x 方向的偏移量。

offsetY: Number

设置图片 y 方向的偏移量。

region

辅助背景框

  1. guide.region = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  3.   start: {object} | {function} | {array}, // 辅助框起始位置
  4.   end: {object} | {function} | {array},// 辅助框结束位置
  5.   style: {object} // 辅助框的图形样式属性
  6. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

start: Object|Array|Function

指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5.  }

end: Object|Array|Function

指定辅助背景框的结束位置，即背景框的右下角，该属性用法同 start。

style

用于设置辅助背景框的样式。

html

辅助html

  1. guide.html = {
  2.   position: {object} | {function} | {array}, // html 的中心位置
  3.   htmlContent: {string}, // html 代码
  4.   alignX: {string}, // html 水平方向的布局，可取值为 'left'，'middle'，'right'
  5.   alignY: {string}, // html 垂直方向的布局，可取值为 'top'，'middle'，'bottom'
  6.   offsetX: {number},
  7.   offsetY: {number},
  8.   zIndex: {number}
  9. }

position: Object|Array|Function

设置 html 的显示位置，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. {
  2.     position(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5. }

alignX: String

html 的水平对齐方式，可取值为： left、middle、right，默认值为 middle。

alignY: String

html 的垂直对齐方式，可取值为： top、middle、bottom，默认值为 middle。

htmlContent: String

需要显示的 html 内容。

zIndex: Number

html 层级。

offsetX: Number

设置 html 在 x 方向的偏移量。

offsetY: Number

设置 html 在 y 方向的偏移量。

arc

辅助圆弧。

  1. guide.arc = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  3.   start: {object} | {function} | {array}, // 辅助框起始位置
  4.   end: {object} | {function} | {array},// 辅助框结束位置
  5.   style: {object} // 图形样式属性
  6. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

start: Object|Array|Function

指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5.  }

end: Object|Array|Function

指定辅助圆弧的结束位置，该属性用法同 start。

style: Object

设置圆弧的显示样式。

regionFilter

辅助区域过滤，将图表中位于矩形选区中的图形元素提取出来，重新着色。

  1. guide.regionFilter = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 true, 即绘制在最上层
  3.   start: {object} | {function} | {array}, // 起始位置
  4.   end: {object} | {function} | {array},// 结束位置
  5.   color: {string}, // 染色色值
  6.   apply: {array}, // 可选，设定 regionFilter 只对特定 geom 类型起作用
  7.   style: {object} // 可选，为 regionFilter 区域设定额外的样式
  8. }

start: Object|Array|Function

指定辅助背景框的起始位置，即背景框的左上角，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5.  }

end: Object|Array|Function

指定辅助过滤区域的结束位置，即过滤区域的右下角，该属性用法同 start。

color: String

指定辅助过滤区域内图形元素重新着色的色值。

apply: Array

可选，设定 regionFilter 只对特定 geom 类型起作用，如 apply: [ 'area' ]，默认 regionFilter 的作用域为整个图表。

style: Object

可选，为过滤区域的图形设置额外的样式。

dataMarker

特殊数据标注点，适用于折线图和面积图。

  1. guide.dataMarker = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 true, 即绘制在最上层
  3.   position: {object} | {function} | {array}, // 标注点起始位置
  4.   content: {string}, // 显示的文本内容
  5.   style: {
  6.     text: {object}, // 设置文本的显示样式
  7.     point:{object}, // 设置标注点的显示样式
  8.     line: {object} // 设置标注线的显示样式
  9.   },// 可选
  10.   display:{
  11.     text: {boolean}, // 是否显示文本
  12.     point: {boolean}, // 是否显示标注点
  13.     line: {boolean} // 是否显示标注线
  14.   },// 可选，是否显示文本/point/line，默认为全部显示
  15.   lineLength: {number}, //可选，line 长度，default 为 20
  16.   direction: {string}, // 可选，朝向，默认为 upward，可选值为 'upward' 或者 'downward'
  17.   autoAdjust: {boolean} // 可选，文本超出绘制区域时，是否自动调节文本方向，默认为 true
  18. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

position: Object|Array|Function

指定特殊数据点标注的位置，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. {
  2.     position(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5. }

content: String

辅助文本的显示内容。

style: Object

用于设置 point/line/text 样式。

display: Object

用于设置是否显示 point/line/text。

lineLength: Number

设置 line 的长度，default为 20。

direction: String

标注点朝向：’upward’ | ‘downward’, default为 ‘upward’，即向上。

adjust: Boolean

当文本超出绘制区域时，是否自动调节文本方向，默认为 true，内部会自动调节文本方向。

dataRegion

特殊数据区间标注，适用于折线图和面积图。

  1. guide.dataRegion = {
  2.   top: {boolean}, // 指定 giude 是否绘制在 canvas 最上层，默认为 true, 即绘制在最上层
  3.   start: {object} | {function} | {array}, // 标注点起始位置
  4.   end: {object} | {function} | {array}, // 标注点结束位置
  5.   content: {string}, // 显示的文本内容
  6.   style: {
  7.     region: {object}, // 填充区域的显示样式设置
  8.     text: {object} // 文本的显示样式设置
  9.   },// 可选
  10.   lineLength: {number} // 可选，line长度，default为 0
  11. }

top: Boolean

指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层。

start: Object|Array|Function

指定特殊数据区间标注的起始位置，该值的类型如下：

  • object: 使用图表 x,y 对应的原始数据例如： { time: ‘2010-01-01’, value: 200 }
  • array: 使用数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：
    1. 对应数据源中的原始数据;
    2. 关键字：’min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
    3. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
    4. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式
  • function: 回调函数，可以动态得确定辅助元素的位置，应用于数据动态更新，辅助元素的位置根据数据变化的场景
  1. {
  2.     start(xScales, yScales) {
  3.       return []; // 位置信息
  4.     }
  5. }

end: Object|Array|Function

指定特殊数据区间标注的结束位置，该属性用法同 start。

content: String

辅助文本的显示内容。

style: Object

region/text 的显示样式

lineLength: Number

line 的长度，default为 0。

Console-Chart

topUnit

为直角坐标系的指定顶部单位。

  1. config.guide = {
  2.   topUnit: '单位: 元',
  3. };