剣道UI（グラフ）バブルチャートの泡に浮き彫りを追加

Question

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