学习C#开源报表组件Seal Report（32：Seal Report Designer界面布局-28）

Seal Report Designer软件左侧面板的Views节点内Model视图控件其下支持添加Chart JS View视图该控件用于将从数据源查询出的数据通过Chart.js前端图表库渲染成HTML5图表。Chart JS View视图相关的属性与View对象属性类似本文主要学习Chart JS View特有的属性用途。Is enabled属性设置是否启用当前Chart JS View控件Chart width属性图表宽度仅Is responsive值为False时有效Chart height属性图表高度仅Is responsive值为False时有效Is responsive属性值为True则图表尺寸自动调整Maintain Width/Height ratio属性值为True则图表尺寸调整时保持原始宽高比仅Is responsive值为True时有效Chart width in container属性设置图表在其父容器中的宽度仅Is responsive值为True时有效Chart height in container属性设置图表在其父容器中的高度仅Is responsive值为True时有效Show legend属性设置是否显示图例Legend position属性设置图例在图表中的位置Show X Axis属性设置图表是否显示X轴Show Y Axis属性设置图表是否显示Y轴Title属性设置图表标题Title position属性设置图表标题位置X Axis:Title属性设置图表的X轴标题X Axis:Number of values属性设置图表X轴能显示的最大数据数量值为0则不限制Y Axis:Title属性设置图表Y轴标题Y Axis:Minimum value属性设置图表Y轴最小值Y Axis:Maximum value属性设置图表Y轴最大值Y Axis:Step size属性设置图表Y轴的刻度间隔步长Secondary Y Axis:Title属性设置图表次要Y轴标题Secondary Y Axis:Minimum value属性设置图表次要Y轴最小值Secondary Y Axis:Maximum value属性设置图表次要Y轴最大值Secondary Y Axis:Step size属性设置图表次要Y轴的刻度间隔步长Bar:Is stacked属性对于柱状图是否支持堆叠Bar:Horizontals属性对于柱状图是否从默认的垂直方向切换为水平方向Pie:Is doughnut属性对于饼图是否切换为环形图Line:Stepped属性对于折线图是否将数据点连接方式从直线切换为阶梯线Line or Radar:Fill area属性对于折线图或者雷达图数据系列下方是否填充颜色Colors属性设置数据系列Series的自定义颜色Color mappings属性设置数据值与颜色的映射关系Point radius属性对于折线图设置数据点的尺寸单位为像素Padding属性设置图表内容与图表容器边缘之间的空白尺寸Time Unit属性设置图表中日期时间轴的单位Time Step Size属性设置图表中日期时间轴的刻度间隔步长Label:Display type属性设置数据标签的显示类型Label:Series with hidden labels属性显示数据标签时设置要隐藏的数据系列的索引集合Label:Threshold for display属性当Label:Display type属性值为Threshold时本属性设置数据标签的显示阈值Label:Border style属性设置数据标签的边框样式Label:Font style属性设置数据标签的字体样式Label:Color属性设置数据标签的字体颜色Label:Background color属性设置数据标签的背景颜色Label:Clamp属性值为True则根据关联元素的可见形状计算数据标签的锚点位置Label:Clip属性值为True则隐藏超出图表范围的数据标签内容Label:Anchor属性设置数据标签在图表上的锚点位置Label:Alignment属性设置数据标签相对于其锚点Anchor的对齐方向和位置Label:Type属性设置数据标签内显示的值类型Tooltip:Type属性设置工具提示内显示的值类型New sheet for the chart属性值为True则为图表创建新的工作表Chart width属性以Excel形式显示报表时设置图表宽度单位为像素Chart height属性以Excel形式显示报表时设置图表高度单位为像素Show totals属性以Excel形式显示报表时是否向图表数据表格添加汇总行及汇总列Chart width(millimeter)属性以PDF形式显示报表时设置图表宽度单位为毫米Chart height(millimeter)属性以PDF形式显示报表时设置图表高度单位为毫米。Seal Report Designer软件自带的示例中包括不少Chart JS View控件的使用示例以20-KPI.srex文件为例位于Samples文件夹内该文件的Views节点中包含7个子视图前两个视图是Model View后5个视图则全包含Chart JS View控件以展示图表数据。实际操作时如果要用Chart JS View控件需要先在其上级的Model View关联的数据源中配置轴(Axis)及系列 (Serie)前者可以是行元素或者列元素作为图表的X轴而后者属于数据元素作为图表的Y轴。下图以销售数据为例在数据源中配置产品名称作为X轴设置产品每年的销售额为Y轴采用柱状图显示。参考文献[1]https://github.com/ariacom/Seal-Report[2]https://sealreport.org/[3]https://sealreport.org/demo[4]https://sealreport.org/forum/[5]https://github.com/ariacom/Seal-Report/releases[6]https://www.cnblogs.com/Leo_wl/p/7716582.html[7]https://sealreport.org/Help/html/26c7ae63-9b83-dc1d-b5d0-00a18021be41.htm[8]https://sealreport.org/Reports