我爱AxureRP 发表于 2022-12-21 15:27

Axhub Charts专业图表 Axure必备的部件库

高保证图表部件库。生成页面后鼠标指针所到之处,自动悬浮POP信息窗口,效果很棒!





如何使用Axhub Charts的图表

在 Axure 内的 Libraries 面板选择对应图表,拖拽入目标页面即可,预览或生成即可看到图表。


更改图表高宽:

你只需更改元件高宽,生成的图表会自动响应式更改高宽。


更改图表数据:

每个图表元件,都有一个对应的data中继器,更改该中继器的数据,即可更改生成图表的数据。


更改图表的背景:

图表元件的背景是透明的,您可以自由为图表增加一层背景。此外,还可以通过图表对应的config中继器更改主题,目前提供了default主题适合亮色背景,dark主题时候暗色背景。


更改图表样式:

每个图表元件,都有一个对应的config中继器,可以通过更改这里的配置项来控制图表样式,目前有以下几个可配置项(如需增加可通过axhub公众号反馈):

theme:主题颜色,可选 default 和dark(适合深色背景)

showLegend:是否显示图例标记,可选auto(多于1项显示)、true(显示)、false(不显示)

showAxis:是否显示坐标轴,可选true(显示)、false(不显示)

showTooltips:是否显示提示,true(显示)、false(不显示)

labelType:饼图类标签显示方式,可选default(默认)、inner(显示在扇形内)、none(不显示)

chartColor:自定义图表颜色,多个用,分隔,例如#0050B3, #1890FF, #40A9FF,元件会按顺序取色

formHeader :自定义中继器表头,解决表头不能输入中文的问题,每列用,分隔,例如 月份,东京,伦敦 (效果见下文)

xSticks:自定义横坐标刻度的数量和值,多个用,分隔

ySticks:自定义纵坐标刻度的数量和值,多个用,分隔

showText:是否显示图形中间标签文本,true(显示)、false(不显示)
页: [1]
查看完整版本: Axhub Charts专业图表 Axure必备的部件库