legend: Chart legend

Description Usage Arguments

Description

Customize a g2 chart legend.

Usage

1

Arguments

field

A string or true.

position

One of "top", "right", "bottom", or "left", defaults to "bottom".

设置图例的显示位置,可设置的值为:top、right、bottom、left,分别表示上、右、下、左。默认为 bottom

layout

One of "vertical" or "horizontal", defaults to "horizontal"(??).

对分类类型的图例生效,用于设置各个图例项的排列方式,可设置值包括:vertical、horizontal,分别表示垂直和水平排布。

title

A title config list, see chart-title.R.

图例标题的显示样式设置,如果值为 null,表示不展示图例标题,默认不展示。

offsetX

Offset the legend position along the x-axis, in px units, defaults to 0.

图例 x 方向的偏移值,数值类型,数值单位为 'px',默认值为 0。

offsetY

Offset the legend position along the y-axis, in px units, defaults to 0.

图例 Y 方向的偏移值,数值类型,数值单位为 'px',默认值为 0。

itemGap

Space between the legend items(??).

对分类类型的图例生效,表示图例每项之间的间距,如果是水平排布则为左右间距,如果是竖直排布则为上下间距。

itemMarginGap

Margin of each legend item(??).

对分类类型的图例生效,表示各个图例项垂直方向的间距。

itemWidth

Fixed(??) width of each legend item(??).

对分类类型的图例生效,设置图例项的宽度,当图例有很多图例项,并且用户想要这些图例项能垂直对齐时,此时这个属性可帮用户实现此效果。

unCheckColor

A character string specifying the color hex code of legend items when they are deselected, "cancelled". (defaults to some light shade of grey)

对分类类型的图例生效,用于取消选中的图例文本颜色。

background

A list of two values, the background color of the legend as a hexcode string and an opacity 0 through 1.

对分类类型的图例生效,用于设置图例的背景样式。

allowAllCancelled

TRUE or FALSE specifying whether all fields in the legend can be deselected, "cancelled", defaults to FALSE.

对分类类型的图例生效,表示是否允许所有图例项被取消选中,默认为 false,即必须保留一个被选中的图例项。

itemFormatter

A function with one argument which is applied to the legend fields, returns the new value to use for the field.

回调函数,用于格式化图例每项的文本显示。

marker

A character string specifying the symbol to use for all legend fields (see items for how to specifying a marker per field). geoms will specify the default value.

Possible values: "circle", "square", "bowtie", "diamond", "hexagon", "triangle", "triangle-down", "cross", "tick", "plus", "hyphen", "line", "hollowCircle", "hollowSquare", "hollowBowtie", "hollowDiamond", "hollowHexagon", "hollowTriangle", "hollowTriangle-down"

对分类类型的图例生效,用于设置图例的 marker 样式,默认按照 geom 的类型显示。

NOTE: seems one can also specify a function that draws a marker onto a mini canvas, e.g. to draw a line and dot combined.

clickable

Allow deselecting through clicks(??), defaults to TRUE.

对分类类型的图例生效,设置图例项是否允许点击,默认为 true,即允许点击。

hoverable

Allow hover(??), defaults to TRUE.

对分类类型的图例生效,设置是否开启鼠标 hover 至图例的交互效果,默认为 true,即开启动画。

selectedMode

clickable must be TRUE, one of "single" or "multiple".

针对分类类型图例,当 clickable 为 true 时该配置项生效,用于设置图例的选中交互模式,可配置的属性:

onHover

A function which accepts an event object, hoverable must be TRUE.

针对分类类型的图例,用于自定义鼠标 hover 图例项的交互,当 hoverable 为 false 不生效。

onClick

A function which accepts an event object, clickable must be TRUE.

针对分类类型的图例,用于自定义鼠标点击图例项的交互,当 clickable 为 false 不生效。

useHtml

If TRUE then custom HTML templates may be specified for the legend container and legend item.

针对分类类型图例,用于开启是否使用 html 渲染图例,默认为 false,true 表示使用 html 渲染图例。

container

当 useHtml 为 true 时生效,用于指定生成图例的 dom 容器,那么该值必须为 dom 容器的 id 值为分类类型的话,则支持传入索引值。

containerTpl

A container HTML template (so what is container?), defaults to,

<div class="g2-legend" style="position:absolute;top:20px;right:60px;width:auto;">
  <h4 class="g2-legend-title"></h4>
  <ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>
</div>

(??)

当 useHtml 为 true 时生效,用于指定图例容器的模板,默认值如下:

itemTpl

An item HTML template, defaults to,

<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 14px;">
  <i class="g2-legend-marker" style="width:10px;height:10px;border-radius:50
  <span class="g2-legend-text">{value}</span>
</li>

(??)

当 useHtml 为 true 时生效,用于指定生成图例的图例项 html 模板,默认值如下:

slideable

TRUE or FALSE, defaults to TRUE.

针对连续图例,用于设置连续图例是否允许滑动,默认为 true,即开启滑动操作。

width

A number.

针对连续图例,用于设置图例的宽度。

height

A number.

针对连续图例,用于设置图例的高度。

custom

TRUE or FALSE

默认为 false,当 custom 为 true,表示不使用默认生成的图例,允许用户自定义图例,包括具体的图例项以及 click、hover 交互。

自定义图例时需要用户自己声明具体的图例项 items(该属性是一个对象数组,数组中每一项为一个对象类型,结构为: value: ”, marker:fill: 'red')以及图例项的 hover 和 click


nteetor/golly documentation built on May 16, 2019, 8:12 p.m.