css - Kendo UI (Graph) 为气泡图上的气泡添加浮雕

Question

我想知道是否可以为 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

Answer 1

我的一位同事找到了解决方案。您必须在每次刷新或绘制调用后调用此代码:

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);