反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

图表用图片填充系列

  • 文档创建者:文档助手1
  • 历史版本:23
  • 最近更新:Alicehyy 于 2021-12-22
  • 1. 概述

    1.1 应用场景

    柱形图的柱子可以用自定义的图片来填充,显示效果如下图所示:

    222

    1.2 实现思路

    柱形图添加条件属性,给每个分类或系列设置不同的图片填充效果。

    1.3 应用实例

    复用组件下载后可直接在设计器内安装复用,即可实现图表用图片填充效果,无需进行代码编辑;

    更多图表用图片填充组件的示例,可参见 帆软市场-组件 / 设计器→在线组件库,组件复用相关文档请参见:组件复用 。

    组件下载链接
    描述
    效果图
    图片填充柱形图-商务风

    1)该组件适用于深色商务风格模板

    2)利用图片填充代替传统柱形图,同时修改系列 2 配色,突出系列之间的对比差距

    图片填充柱形图-黑金.png
    图片填充条形图-科技风

    1)该组件适用于深色科技风格模板

    2)利用不同颜色的人形图片代替传统条形,适用于表示人数多少的图表,图表形式更加丰富美观

    图片填充条形图-科技风.png

    2. 示例

    2.1 准备数据

    新建普通报表,添加内置数据集 Embedded1,分别记录不同类型的百分比,如下图所示:
    数据集.png

    2.2 设计报表

    1)合并一片区域单元格,插入柱形图,如下图所示:

    1592453945451117.png

    2)属性面板点击数据,绑定柱形图数据,如下图所示:

    3)属性面板选择特效>条件显示,添加四个条件属性,属性都为图片填充,分类序号分别为 1、2、3、4,如下图所示:

    报表设计3.png

    4)属性面板选择样式>系列,根据插入图片的大小,可选择调整柱子宽度或分类间隔,如下图所示:

    2.3 效果预览

    1)PC 端

    保存报表,点击分页预览,效果如下图所示:

    1592455934611544.png

    2)移动端

    1592455268866592.png

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\图片填充柱形图.cpt

    点击下载模板:图片填充柱形图.cpt

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526