企业官网建设流程全解析

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