Question

我想知道是否可以为Kendo UI Bubble图表上的气泡添加浮雕，因为在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

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

＆＃13;

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

＆＃13;

Kendo UI（图形）为气泡图上的气泡添加浮雕

1 个答案: