如何在Axure内使用数据元件


时间: 2020-08-16 12:24:09 人气: 1589 评论: 0

下载:访问 http://www.uhaozhan.com/model/14.html 下载数据元件库

导入:在 Axure 内的 Libraries 面板,通过菜单导入下载的元件库

image.png


元件使用:

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

数据可视化2.gif


更改图表高宽:

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


更改图表数据:

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


更改图表的背景:

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


更改图表样式:

数据可视化3.gif

每个图表元件,都有一个对应的config中继器,可以通过更改这里的配置项来控制图表样式,目前有以下几个可配置项:

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(不显示)


实现动态图表:

你可以通过Axure的事件(Case)来更新图表对应的data中继器数据,图表本身也会自动更新,效果如下:

数据可视化.gif

axure 原型 数据可视化 产品经理 数据产品经理

评论