p85126437
/
datagear
forked from p81075629/datagear
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

完善下拉框图表功能

This commit is contained in:
yigekaiguan 2021-09-22 14:56:07 +08:00
parent 20a9e15f8e
commit 327fe29bee
3 changed files with 146 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
datagear-web/src/main/resources/org/datagear/web/static/css/analysis.css
View File

@ -143,6 +143,24 @@
justify-content: space-between;
}
/*下拉框图表*/
.dg-chart-select{}
.dg-chart-select.dg-chart-select-fill{
position: relative;
}
.dg-chart-select.dg-chart-select-fill .dg-chart-select-select{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*数据集参数值表单*/
.dg-dspv-form{}
.dg-dspv-form .dg-dspv-form-content{

54
datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartFactory.js
View File

@ -387,21 +387,6 @@
delete chart.resultDataFormat;
};
/**
* 获取/设置图表的内置扩展属性值。
* chart.extValue()是允许用户级使用的，此函数应用于内置设置/获取操作，可避免属性名冲突。
*
* @param chart 图表对象
* @param name 扩展属性名
* @param value 可选，要设置的扩展属性值，不设置则执行获取操作
*/
chartFactory.extValueBuiltin = function(chart, name, value)
{
name = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX+"_" + name;
return chart.extValue(name, value);
};
//----------------------------------------
// chartBase start
//----------------------------------------
@ -3199,6 +3184,45 @@
// chartBase end
//----------------------------------------
/**
* 获取/设置图表的内置扩展属性值。
* chart.extValue()是允许用户级使用的，此函数应用于内置设置/获取操作，可避免属性名冲突。
*
* @param chart 图表对象
* @param name 扩展属性名
* @param value 可选，要设置的扩展属性值，不设置则执行获取操作
*/
chartFactory.extValueBuiltin = function(chart, name, value)
{
name = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX+"_" + name;
return chart.extValue(name, value);
};
/**
* 获取/设置指定对象的内置属性值。
*
* @param obj 对象
* @param name 内置属性名
* @param value 可选，要设置的内置属性值，不设置则执行获取操作
*/
chartFactory.builtinProperty = function(obj, name, value)
{
var wrapName = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "Builtin";
var bp = (obj == null ? null : obj[wrapName]);
if(value === undefined)
return (bp == null ? undefined : bp[name]);
else
{
if(bp == null)
bp = (obj[wrapName] = {});
bp[name] = value;
}
};
/**
* 获取/设置渲染上下文的属性值。
*

102
datagear-web/src/main/resources/org/datagear/web/static/script/datagear-chartSupport.js
View File

@ -4951,8 +4951,6 @@
{
chartSupport.chartSignNameMap(chart, { name: nameSign, value: valueSign });
var chartTheme = chart.theme();
var chartEle = chart.elementJquery();
chartEle.addClass("dg-chart-select");
@ -4985,19 +4983,29 @@
selected: undefined,
//前置添加的条目项，格式同data元素，或者其数组，通常用于添加默认选中项
prepend: undefined,
//select框css样式
selectStyle:
{
"color": chartTheme.color,
"background-color": chartTheme.backgroundColor,
"border-color": chartTheme.borderColor
},
//是否美化多选时的滚动条（仅支持webkit内核浏览器）
beautifyScrollbar: true,
//下拉框是否填满父元素，"auto" 当是内联框时填满；true 是；false 否
fillParent: "auto",
//select框css样式，格式为：{ ... }
selectStyle: undefined,
//option选项整体css样式，格式为：{ ... }
itemStyle: undefined
},
options);
var $select = $("<select />").appendTo(chartEle);
var isDropdown = (!options.multiple && (options.size == null || options.size <= 1));
if(options.beautifyScrollbar)
chartEle.addClass("dg-chart-beautify-scrollbar");
if(isDropdown)
chartEle.addClass("dg-chart-select-dropdown");
if(options.fillParent === true || (options.fillParent == "auto" && !isDropdown))
chartEle.addClass("dg-chart-select-fill");
chartEle.addClass(chartSupport.selectThemeStyleClassName(chart));
var $select = $("<select class='dg-chart-select-select' />").appendTo(chartEle);
if(options.name)
$select.attr("name", options.name);
@ -5005,8 +5013,8 @@
$select.attr("multiple", "multiple");
if(options.size != null)
$select.attr("size", options.size);
chartFactory.setStyles($select, options.selectStyle);
if(options.selectStyle)
chartFactory.setStyles($select, options.selectStyle);
chart.internal($select[0]);
};
@ -5104,7 +5112,7 @@
chartSupport.selectDestroy = function(chart)
{
var chartEle = chart.elementJquery();
chartEle.removeClass("dg-chart-select");
chartEle.removeClass("dg-chart-select dg-chart-select-dropdown dg-chart-beautify-scrollbar");
$(chart.internal()).remove();
};
@ -5151,6 +5159,48 @@
chartSupport.setChartEventOriginalInfo(chart, chartEvent, chartData);
};
chartSupport.selectThemeStyleClassName = function(chart)
{
var chartTheme = chart.theme();
var styleSheetId = chartSupport.chartThemeStyleSheetId(chartTheme, "selectChart");
var styleClassName = chartSupport.chartThemeStyleClassName(chartTheme, "selectChart");
if(chartFactory.isStyleSheetCreated(styleSheetId))
return styleClassName;
var qualifier = "." + styleClassName + " .dg-chart-select-select";
var qualifierDropdown = "." + styleClassName + ".dg-chart-select-dropdown .dg-chart-select-select";
var qualifierBeautifyScrollbar = "." + styleClassName + ".dg-chart-beautify-scrollbar .dg-chart-select-select";
var cssText =
qualifier + "{"
+" color:" + chartTheme.color +";"
+" background-color:" + chartTheme.backgroundColor +";"
+" border-color:" + chartTheme.borderColor +";"
+"}\n"
+qualifierDropdown + " option{"
+" color:" + chartTheme.color +";"
+" background-color:" + chart.gradualColor(0.1) +";"
+"}\n"
+qualifierBeautifyScrollbar + "::-webkit-scrollbar{"
+ " width: 10px;"
+ " height: 10px;"
+" }\n"
+qualifierBeautifyScrollbar + "::-webkit-scrollbar-thumb{"
+ " border-radius: 10px;"
+ " background: "+chart.gradualColor(0.3)+";"
+" }\n"
+qualifierBeautifyScrollbar + "::-webkit-scrollbar-track{"
+ " background: "+chart.gradualColor(0.1)+";"
+" }\n"
;
chartFactory.createStyleSheet(styleSheetId, cssText, "beforeFirstScript");
return styleClassName;
};
//自定义
chartSupport.customAsyncRender = function(chart)
@ -5890,6 +5940,32 @@
return re;
};
chartSupport.chartThemeStyleSheetId = function(chartTheme, name)
{
var styleSheetId = chartFactory.builtinProperty(chartTheme, name +"_styleSheetId");
if(!styleSheetId)
{
styleSheetId = chartFactory.nextElementId();
chartFactory.builtinProperty(chartTheme, name +"_styleSheetId", styleSheetId);
}
return styleSheetId;
};
chartSupport.chartThemeStyleClassName = function(chartTheme, name)
{
var styleClassName = chartFactory.builtinProperty(chartTheme, name +"_styleClassName");
if(!styleClassName)
{
styleClassName = chartFactory.nextElementId();
chartFactory.builtinProperty(chartTheme, name +"_styleClassName", styleClassName);
}
return styleClassName;
};
//---------------------------------------------------------
// 公用函数结束
//---------------------------------------------------------