SQL图表

Definition

SQL图表 为您提供了另一种报表媒体。您可以灵活地定义自己的SQL查询，以确定您想要生成的图表，从多种图表类型。

图1：SQL图表属性

名称	描述
自定义ID	物品链接slu </s>。可选字段。独特的领域在这里定义的值必须是唯一的用户视图菜单的其余部分，因为第一个匹配的名称将被调用。
标签	菜单标签。必填项。
图表类型	面积图条形图泡沫图表烛台图表甜甜圈图表折线图打开高低关闭图表（OHLC图表）饼形图 XY图表
图表标题	图表标题将显示在生成的图形的一部分。 New Feature This feature has been enhanced in Joget Workflow v6 to support join, group and aggregate function.

图2：SQL图表属性 - 图表选项

名称	描述
X轴标签	X轴标签
X轴显示为	类别数日期
Y轴标签	Y轴标签
Y轴前缀	Y轴前缀
显示传奇？	如果选中，图例将显示在生成的图表中。
在图表中显示值标签？	如果选中，则值标签将显示在生成的图形中。
宽度	字符宽度。例 100％
高度	字符高度。例 300像素
颜色	系列颜色。可选字段。颜色代码的逗号分隔值（CSV）。例如：例＃3333FF，＃66FF00，＃FF9933，＃990000 Example 红，橙，黄，绿，蓝，靛什么是默认颜色？ http://stackoverflow.com/questions/18332440/what-are-the-jqplot-default-series-colors

图3：SQL图表属性 - SQL

名称

描述

SQL查询

SQL Query来生成图表类型所需的数据集。

数据集中的第一列将假定为X轴/标签。

例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

图4：SQL图表属性 - UI

名称	描述
自定义标题	HTML中的自定义标题。
自定义页脚	HTML中的自定义页脚

图5：SQL图表属性 - 高级

名称

描述

数据源

默认数据源
自定义数据源

如果选择默认数据源，则下面的自定义JDBC设置将被忽略。

用户视图键名称

定义时，将使用此处定义的值作为参数，并使用userview键值作为值附加附加条件。

例

SQL：SELECT类别，计数（类别）FROM table1

用户视图键名称：类型

用户视图键值：val

结果SQL：SELECT类别，计数（类别）FROM table1 WHERE type ='val'

当定义userview键值时，您可以在您的SQL查询中定义＃userviewKey＃ ，使其替换为userview键值。

例

SQL：SELECT类别，count（类别）FROM table1 WHERE type ='＃userviewKey＃'

用户视图键值：val

结果SQL：SELECT类别，计数（类别）FROM table1 WHERE type ='val'

交互式图表

下面的代码可以修改并放在交互式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缓存进行性能改进，了解更多信息。

Page tree

SQL图表

交互式图表