我想知道是否可以为 Kendo UI 气泡图上的气泡添加浮雕,因为对于 15 个给定的主题,所有气泡都保持平坦: http://demos.telerik.com/kendo-ui/bubble-charts/index
最好添加像饼图这样的 3D 样式(统一样式): http://demos.telerik.com/kendo-ui/pie-charts/index
我想这可以通过向 SVG 添加 CSS 来完成,但我有点迷路了。
有什么想法吗?
谢谢:D
最佳答案
我的一位同事找到了解决方案。您必须在每次刷新或绘制调用后调用此代码:
var svg = $('svg');
var circles = svg.find('circle');
var svgEl = svg[0];
$.each(circles, function (key, circle) {
var fillColor = $(this).attr('fill');
var id = fillColor.replace('#', 'kgrad');
var stops = [
{offset: '0', 'stop-color': fillColor, 'stop-opacity': 0.3},
{offset: '0.84', 'stop-color': fillColor, 'stop-opacity': 0.95},
{offset: '0.85', 'stop-color': fillColor, 'stop-opacity': 0.7},
{offset: '0.99', 'stop-color': fillColor, 'stop-opacity': 1}];
if (svg.find('#' + id).length === 0) {
var svgNS = svgEl.namespaceURI;
var grad = document.createElementNS(svgNS, 'radialGradient');
grad.setAttribute('id', id);
for (var i = 0; i < stops.length; i++) {
var attrs = stops[i];
var stop = document.createElementNS(svgNS, 'stop');
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr))
stop.setAttribute(attr, attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svgEl.querySelector('defs') || svgEl.insertBefore(document.createElementNS(svgNS, 'defs'), svgEl.firstChild);
defs.appendChild(grad);
}
$(this).attr('fill', 'url(#' + id + ')');
}, this);
关于css - Kendo UI (Graph) 为气泡图上的气泡添加浮雕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37117391/