zoukankan      html  css  js  c++  java
  • 在线报表设计实战系列 – ⑧制作多Y轴组合图表

    葡萄城报表是一套强大的报表开发和系统搭建工具,既能与您开发的报表软件项目紧密集成,也可独立部署运行,支持多数据源,具有无编码、灵活、稳定等特性,可以帮您快速搭建专业的报表软件系统,实现各类报表的设计、管理、权限控制、数据填报、负载均衡及跨平台发布。

    本节主要讲解使用葡萄城报表制作多Y轴组合图表。

    图表应用中,经常会有展示多项数值型数据的需求,比如分析每个月的销售额和销售量的图表,如下图: 

     

    由于销售金额与销售数量的数量级不同,如果采用简单的柱形图,销售数量将因数值太小而紧贴在X轴上,看不出各月的销售量变化趋势。此时就需要使用葡萄城报表的多Y轴功能,实现独立刻度的多Y轴组合图表。 

    (1)创建数据集 

    从报表管理门户(http://localhost:8080)点击【创建报表】,进入新报表的设计页面。点击右边栏的【数据】选项卡,再点击【数据集】右侧的【添加】如下图: 

     

    在【新建数据集】下方,选中之前创建好的示例数据源,再点击【添加】按钮,如下图: 

     

    在数据集编辑对话框中,输入SQL语句: 

     SELECT strftime("%m",O.订购日期) AS 订购月,COUNT(O.订单ID) AS 订单数量, SUM(OD.数量 * OD.单价 *(1- OD.折扣)) AS 订单金额
     FROM 订单 O
     INNER JOIN 订单明细 OD ON O.订单ID = OD.订单ID
     WHERE strftime("%Y",O.订购日期) = "2011"
     GROUP BY strftime("%m",O.订购日期)
     order by 1 

    如下图: 

    (2)添加图表控件 

    从工具箱中拖放一个图表到设计区,将数据集的【订购月】字段拖放到【分类字段】区域,将【订单数量】和【订单金额】拖放到【数据字段】区域,如下图: 

    (3)添加新Y轴 

    在右侧【选项】设置面板中,点击【数据坐标轴】右侧的图标,再点击【添加项目】,即可添加一个新的Y轴,如下图: 

     

    点击【Y2】右侧的设置图标,切换到【坐标轴格式】设置面板,设置【位置】为【右边(Right)】,意为将Y2轴显示在绘图区的右侧,如下图: 

    (4)数据字段绑定新Y轴 

    在图表中选中【订单数量】字段,将右侧选项面板中的【数据坐标轴名称】从默认的【Y1】修改为【Y2】,再将【类型】选定为【折线(Line)-平滑(Smooth)】,如下图: 

     

    (5)设置外观 

    点击左侧工具箱上方的元素管理图标,展开报表元素树形结构,选中图表元素【图表1】,设置【皮肤】为【自定义(Custom)】,添加两个自定义的颜色,如下图: 

     

    选中元素树形目录中的【图表标题】,在选项设置面板中修改【标题】为“销售额与销售量分析”,如下图: 

     

    选中元素树形目录中的【图例】,在选项设置面板中修改【类型】为【行(Row)】,修改【位置】为【底部居中(BottomCenter)】,如下图: 

     

    选中元素树形目录中的【分类坐标轴-坐标轴标题】,在选项设置面板中修改【坐标轴标题】为【月份】,如下图: 

     

    使用同样方法,将Y1和Y2的坐标轴标题修改为【销售量】和【销售额】。再适当调整图表的尺寸。 

    预览效果如下图: 

     

    可以看到,由于两个Y轴的刻度最大值不同,销售额和销售量都能清楚地看到每个月的变化趋势。

    定制培训加量全心送!凡在2017年12月31日之前,购买葡萄城控件团队授权企业授权的用户,不仅可以享受到优惠的价格,还可获赠葡萄城技术专家根据客户项目需求提供的定制培训服务。老客户推荐新客户成单,也将获得“客户推荐双重感恩礼”。

    点击此处,了解更多。

    转载请注明出自:葡萄城报表 

  • 相关阅读:
    4.9Java学习
    我晕了
    注意的
    语句
    第三天JAVA
    JAVA的学习
    JAVA的继承
    JAVA构造方法
    怎么去理解JAVA中类与对象的关系
    Java中三种比较常见的数组排序
  • 原文地址:https://www.cnblogs.com/zenmshuo/p/mul_y.html
Copyright © 2011-2022 走看看