Kendo UI (Grafik) Füge den Blasen auf dem Bubble-Chart Relief hinzu

Question

Ich frage mich, ob es möglich ist, den Blasen in den Kendo UI Bubble Charts ein Relief hinzuzufügen, denn mit den 15 vorgegebenen Themen bleiben alle Bubbles flach: http://demos.telerik.com/kendo-ui/bubble-charts/index

es wäre schön, einen 3D-Stil wie das Kreisdiagramm (Uniform-Stil) hinzuzufügen: http://demos.telerik.com/kendo-ui/pie-charts/index

ich denke, es durch hinzufügen eines CSS zum SVG getan werden könnte, aber ich bin ein bisschen von verloren.

Irgendwelche Ideen?

Dank: D

Answer 1

Ein Kollege von mir eine Lösung gefunden. Sie haben den Code rufen nach jeder Aktualisierung oder ziehen rufen:

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