Kendo UI (график) Добавьте рельеф к пузырям на диаграмме пузырьков

Question

Мне было интересно, можно ли добавить рельеф к пузырям на диаграммах пузырьков Kendo UI Bubble, потому что с 15 заданными темами все пузырьки остаются плоскими: http://demos.telerik.com/kendo-ui/bubble-charts/index

было бы неплохо добавить 3D-стиль, как круговая диаграмма (Uniform стиль): http://demos.telerik.com/kendo-ui/pie-charts/index

Я предполагаю, что это может быть сделано путем добавления CSS в SVG, но я вроде потерянных.

Любые идеи?

Сказал (а) спасибо: 0

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