Kendo UI (Graph) Ajouter du relief aux bulles sur le graphique à bulles

Question

Je me demandais s'il était possible d'ajouter un relief aux bulles sur les graphiques Kendo UI Bubble, car, avec les 15 thèmes donnés, toutes les bulles restent plates: http://demos.telerik.com/kendo-ui/bubble-charts/index

ce serait bien d'ajouter un style 3D comme le graphique circulaire (style uniforme): http://demos.telerik.com/kendo-ui/pie-charts/index

Je pense que cela pourrait être fait en ajoutant un CSS au SVG, mais je suis un peu de perdu.

Des idées?

Merci: D

Answer 1

Un de mes collègues a trouvé une solution. Vous devez appeler ce code après chaque actualisation ou dessiner appel:

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