图表 （SQL图表） 为您提供了另一种报表媒体。您可以灵活地定义自己的SQL查询，以确定您想要生成的图表，从多种图表类型。
图1：SQL图表属性
| 名称 | 描述 |
|---|---|
| 自定义ID | 物品链接slu </s>。可选字段。 独特的领域 在这里定义的值必须是唯一的用户视图菜单的其余部分，因为第一个匹配的名称将被调用。 |
| 标签 | 菜单标签。必填项。 |
| 图表类型 |
|
| 图表标题 | 图表标题将显示在生成的图形的一部分。 New Feature This feature has been enhanced in Joget Workflow v6 to support join, group and aggregate function. |
图2：SQL图表属性 - Datasource
| 名称 | 描述 |
|---|---|
| Datasource |
New Feature New feature in Joget Workflow for more flexible ways to build chart dataset using the existing Datalist Binders. |
| Data Binder | When Datasource is set to "Using Data Binder", this option will show up. Please see Datalist Binder for available binder to use. |
SQL查询 | When Datasource is set to use any of the "Datasource", this option will show up. SQL Query来生成图表类型所需的数据集。 数据集中的第一列将假定为X轴/标签, followed by value columns for the Y-axis. 例1： 例 SELECT c_status as'status'，COUNT（c_status）as'count'FROM app_fd_tix_tickets WHERE c_status IS NOT NULL GROUP BY c_status
例2： SQL 选择c.c_claimant，sum（cast（替换（c.c_total，'$'，''）为十进制（10,2）））为'total'，avg（cast（replace（c.c_total，'$' ''）作为十进制（10,2）））作为'平均'从app_fd_hr_expense_claim c组由c.c_claimant
 |
Figure 3: SQL Chart Properties - Data Binder & Chart Data Mapping (applicable for - using Data Binder)
| Name | Description |
|---|---|
| Order By | Column to be sorted in the graph dataset. This would affect how the graph is plotted. |
| Order |
|
X-axis Value | X-axis label. |
Y-axis Values | Y-axis dataset. |
图4：SQL图表属性 - 图表选项 (applicable for - using Datasource)
| 名称 | 描述 |
|---|---|
X轴标签 | X轴标签 |
X轴显示为 |
|
Y轴标签 | Y轴标签 |
Y轴前缀 | Y轴前缀 |
显示传奇？ | 如果选中，图例将显示在生成的图表中。 |
在图表中显示值标签？ | 如果选中，则值标签将显示在生成的图形中。 |
| 宽度 | 字符宽度。 例 100％ |
| 高度 | 字符高度。 例 300像素 |
| 颜色 | 系列颜色。可选字段。 颜色代码的逗号分隔值（CSV）。 例如： 例 ＃3333FF，＃66FF00，＃FF9933，＃990000
Example 红，橙，黄，绿，蓝，靛
|
Figure 5: SQL Chart Properties - Advanced
| Name | Description |
|---|---|
Userview Key Name | When defined, additional condition will be appended using the value defined here as the parameter and the userview key value as the value. Example SQL: SELECT category, count(category) FROM table1 Userview Key Name: type Userview Key Value: val Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val' When userview key value is defined, you may define #userviewKey# in your SQL query to have it replaced with the userview key value. Example SQL: SELECT category, count(category) FROM table1 WHERE type = '#userviewKey#' Userview Key Value: val Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val' |
Custom Header | Custom Header in HTML. |
Custom Footer | Custom Footer in HTML. |
交互式图表
下面的代码可以修改并放在交互式Chart的“Custom Footer”中。
<SCRIPT>
$（文件）。就绪（函数（）{
$（ '＃jq_plot_chart'）。绑定（ 'jqplotDataClick'，
函数（event，seriesIndex，pointIndex，data）{
的console.log（事件）;
的console.log（seriesIndex）;
的console.log（pointIndex）;
的console.log（数据）;
//对于使用图例和x轴的图表，
var xaxis = $（“。jqplot-xaxis-tick：eq（”+ pointIndex +“）”）;
var series = $（“。jqplot-table-legend-label：eq（”+ seriesIndex +“）”）;
console.log（“x-axis：”+ xaxis.text（））;
console.log（“series：”+ series.text（））;
}
）;
/ /双击事件。请注意，论据是不同的。
$（ '＃jq_plot_chart'）。绑定（ 'jqplotDblClick'，
功能（事件，坐标，点数据）{
的console.log（事件）;
的console.log（坐标）;
的console.log（分）;
的console.log（数据）;
如果（数据）{
var xaxis = $（“。jqplot-xaxis-tick：eq（”+ data.pointIndex +“）”）;
var series = $（“。jqplot-table-legend-label：eq（”+ data.seriesIndex +“）”）;
console.log（“values：”+ data.data）;
console.log（“x-axis：”+ xaxis.text（））;
console.log（“series：”+ series.text（））;
}
}
）;
}）;
</ SCRIPT>
此代码不适用于OHLC和烛台图表。
您可以在此UserView元素中配置“ 性能”设置，以允许缓存现有内容以提高性能和加载速度。使用Userview缓存进行性能改进，了解更多信息。