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

看板内图表元素的内置CSS样式改为通过样式类而非内联style的方式，避免用户自定义图表样式类不起作用的问题

This commit is contained in:
yigekaiguan 2021-09-22 21:34:06 +08:00
parent 327fe29bee
commit 8e5d2e22ce
2 changed files with 193 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -201,6 +201,9 @@
/**数据对象的原始信息属性名*/
chartFactory.DATA_ORIGINAL_INFO_PROP_NAME = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "OriginalInfo";
/**关键字：图表元素样式标识*/
chartFactory._KEY_CHART_ELE_THEME_STYLE = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "ChartEleStyle";
/**
* 图表使用的渲染上下文属性名。
*/
@ -937,7 +940,7 @@
throw new Error("Chart element '#"+this.elementId+"' has been rendered");
$element.data(chartFactory._KEY_ELEMENT_RENDERED_CHART, this);
chartFactory.setThemeStyle($element, this.theme());
this._setChartElementThemeStyle();
this.statusRendering(true);
@ -953,6 +956,34 @@
}
};
chartBase._setChartElementThemeStyle = function()
{
var styleName = chartFactory.chartThemeStyleName(this.theme(), chartFactory._KEY_CHART_ELE_THEME_STYLE,
function(chartTheme)
{
var so=
{
name: "",
value:
{
"color": chartTheme.color,
"background-color": chartTheme.backgroundColor,
"border-color": chartTheme.borderColor
}
};
if(chartTheme.borderWidth)
{
so.value["border-width"] = chartTheme.borderWidth;
so.value["border-style"] = "solid";
}
return so;
});
this.elementJquery().addClass(styleName);
};
/**
* 调用底层图表渲染器的render函数，执行渲染。
*/
@ -1080,7 +1111,9 @@
var $element = this.elementJquery();
this.statusDestroyed(true);
$element.data(chartFactory._KEY_ELEMENT_RENDERED_CHART, null);
$element.removeClass(chartFactory.chartThemeStyleName(this.theme(), chartFactory._KEY_CHART_ELE_THEME_STYLE));
var renderer = this.renderer();
@ -3184,6 +3217,109 @@
// chartBase end
//----------------------------------------
chartFactory._KEY_THEME_STYLE_INFO = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "StyleInfo";
/**
* 获取与图表主题关联的且由指定名称标识的CSS样式表的顶级类名，这个顶级类名可用于添加至HTML元素的'class'属性。
* 如果CSS样式表还未创建且generator不为undefined，将创建由generator返回的CSS样式表。
*
* @param chartTheme 图表主题
* @param name 标识名称
* @param generator 可选，CSS样式表生成器，格式为：
* function(chartTheme, styleName){ return CSS样式表对象、CSS样式表对象数组、CSS样式字符串; }
* 或者
* CSS样式表对象。
* 其中，CSS样式表对象格式为：
* {
* //CSS样式限定类型，例如：" .success"、".success"、" .tip.success"
* name: "..."、["...", ...],
* //CSS样式属性，例如：{ 'color': 'red', 'border-color': 'blue' }
* value:{ CSS属性名 : CSS属性值, ... }
* }
* 注意：如果是CSS样式字符串，应是已添加styleName顶级限定类名的，CSS样式表对象的话，则会自动添加styleName顶级限定类型。
*/
chartFactory.chartThemeStyleName = function(chartTheme, name, generator)
{
var tsnObj = chartTheme[chartFactory._KEY_THEME_STYLE_INFO];
if(tsnObj == null)
tsnObj = (chartTheme[chartFactory._KEY_THEME_STYLE_INFO] = {});
var info = tsnObj[name];
if(info == null)
{
info =
{
sheetId: chartFactory.nextElementId(),
styleName: chartFactory.nextElementId(),
created: false
};
tsnObj[name] = info;
}
if(info.created == true || generator === undefined)
return info.styleName;
var cssText = "";
if($.isFunction(generator))
generator = generator(chartTheme, info.styleName);
if(generator == null)
;
else if(typeof(generator) == "string")
cssText = generator;
else
{
if(!$.isArray(generator))
generator = [ generator ];
for(var i=0; i<generator.length; i++)
{
var cssName = generator[i].name;
var cssValue = generator[i].value;
if(cssName == null)
continue;
if(!$.isArray(cssName))
cssName = [ cssName ];
for(var j=0; j<cssName.length; j++)
{
cssText += "."+info.styleName + cssName[j];
if(j < (cssName.length - 1))
cssText += ",\n";
}
cssText += "{\n";
if(cssValue)
{
for(var p in cssValue)
cssText += p + ":" + cssValue[p]+";\n";
}
cssText += "}\n";
}
}
chartFactory.createStyleSheet(info.sheetId, cssText, "beforeFirstScript");
info.created = true;
return info.styleName;
};
/**
* 获取指定名称的内置名称（添加内置前缀）。
*/
chartFactory.builtinName = function(name)
{
return chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + name;
};
/**
* 获取/设置图表的内置扩展属性值。
* chart.extValue()是允许用户级使用的，此函数应用于内置设置/获取操作，可避免属性名冲突。
@ -3194,35 +3330,10 @@
*/
chartFactory.extValueBuiltin = function(chart, name, value)
{
name = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX+"_" + name;
name = chartFactory.builtinName(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;
}
};
/**
* 获取/设置渲染上下文的属性值。
*
@ -3295,7 +3406,7 @@
};
/** HTML元素上已渲染的图表对象KEY */
chartFactory._KEY_ELEMENT_RENDERED_CHART = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "_renderedChart";
chartFactory._KEY_ELEMENT_RENDERED_CHART = chartFactory.BUILT_IN_NAME_UNDERSCORE_PREFIX + "RenderedChart";
/**
* 获取当前在指定HTML元素上渲染的图表对象，返回null表示元素上并未渲染图表。
@ -3414,17 +3525,6 @@
return JSON.stringify(obj);
};
/**
* 为元素设置主题样式。
*
* @param element HTML元素、Jquery对象
* @param theme 主题对象
*/
chartFactory.setThemeStyle = function(element, theme)
{
return this.setStyles(element, theme);
};
/**
* 为元素设置样式集。
*

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

@ -5003,7 +5003,7 @@
if(options.fillParent === true || (options.fillParent == "auto" && !isDropdown))
chartEle.addClass("dg-chart-select-fill");
chartEle.addClass(chartSupport.selectThemeStyleClassName(chart));
chartEle.addClass(chartSupport.selectThemeStyleName(chart));
var $select = $("<select class='dg-chart-select-select' />").appendTo(chartEle);
@ -5112,7 +5112,10 @@
chartSupport.selectDestroy = function(chart)
{
var chartEle = chart.elementJquery();
chartEle.removeClass("dg-chart-select dg-chart-select-dropdown dg-chart-beautify-scrollbar");
chartEle.removeClass(chartSupport.selectThemeStyleName(chart));
$(chart.internal()).remove();
};
@ -5159,46 +5162,57 @@
chartSupport.setChartEventOriginalInfo(chart, chartEvent, chartData);
};
chartSupport.selectThemeStyleClassName = function(chart)
chartSupport.selectThemeStyleName = 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;
return chartFactory.chartThemeStyleName(chart.theme(), chartFactory.builtinName("SelectChart"),
function(chartTheme)
{
var so=
[
{
name: " .dg-chart-select-select",
value:
{
"color": chartTheme.color,
"background-color": chartTheme.backgroundColor,
"border-color": chartTheme.borderColor
}
},
{
name: ".dg-chart-select-dropdown .dg-chart-select-select option",
value:
{
"color": chartTheme.color,
"background-color": chart.gradualColor(0.1)
}
},
{
name: ".dg-chart-beautify-scrollbar .dg-chart-select-select::-webkit-scrollbar",
value:
{
"width": "10px",
"height": "10px"
}
},
{
name: ".dg-chart-beautify-scrollbar .dg-chart-select-select::-webkit-scrollbar-thumb",
value:
{
"border-radius": "10px",
"background": chart.gradualColor(0.3)
}
},
{
name: ".dg-chart-beautify-scrollbar .dg-chart-select-select::-webkit-scrollbar-track",
value:
{
"background": chart.gradualColor(0.1)
}
}
];
return so;
});
};
//自定义
@ -5940,32 +5954,6 @@
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;
};
//---------------------------------------------------------
// 公用函数结束
//---------------------------------------------------------