Highchart Полярная диаграмма нескольких цветов фона для SVG

Question

Я пытаюсь создать модель Quinn с библиотекой highchart.

Со всеми образцами из highchart и multiple pane segment colors , я мог бы создать что-то полурабочее.

Но проблема в том, что я пытаюсь написать SVG на холст (создавая фиксированное изображение), цвета сегментов панели не экспортируются вместе с ним.

У меня есть образец на this jsfiddle link с еще несколькими перегибами не работает, не уверен, почему пока, так как он отлично работает на моем сервере. Попробуем исправить это для рабочего образца.

Итак, есть способ привязать chart.renderer.add() к высокому объекту, чтобы SVG имел полные данные?

$(function() { 
    Highcharts.setOptions({ 
     plotOptions: { 
      series: { 
       animation: false 
      } 
     } 
    }); 

    var chart = new Highcharts.Chart({ 
     chart: { 
      polar: true, 
      renderTo: 'container' 
     }, 
     title: { 
      text: '' 
     }, 
     legend: { 
      enabled:false 
     }, 
     tooltip: { 
      enabled:false 
     }, 
     pane: { 
      startAngle: 0, 
      endAngle: 360, 
      background: [{ 
       backgroundColor: { 
        radialGradient: { 
         cx: 0.5, 
         cy: 0.5, 
         r: 2 
        }, 
        stops: [ 
         [0, 'white'], 
         [1, 'black'] 
        ] 
       } 
      }] 
     }, 
     xAxis: { 
      categories: [ 

       'Quadrant 1', 
       'Quadrant 2', 
       'Quadrant 3', 
       'Quadrant 4' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      max: 10 
     }, 
     series: [{ 
      data: [6, 3, 5, 1000], 
      color: '#000', 
      name: 'Main Score' 
     }] 
    }); 

    //plotting starts from top-left clockwise to bottom-right 
    var colors = [ "orange", "red", "green", "blue" ];  
    var parts = 4; 

    for(var i = 0; i < parts; i++) { 
     chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
          chart.plotTop + chart.yAxis[0].center[1], 
          chart.yAxis[0].height, 
          0, 
          -Math.PI + (Math.PI/(parts/2) * i), 
          -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({ 
      fill: colors[i % colors.length], 
      'stroke-width': 1, 
      'opacity': 0.6 
     }).add(); 
    } 

    // Get the cart's SVG code 
    var svg = chart.getSVG(); 

    var render_width = 600; 
    var render_height = 400; 

    // Create a canvas 
    var canvas = document.getElementById('canvas'); 
    canvas.height = render_height; 
    canvas.width = render_width; 

    // Create an image and draw the SVG onto the canvas 
    var image = new Image; 
    image.onload = function() { 
     canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height); 
    }; 
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg); 
}); 

Answer 1

Проблема в том, что созданные фоны не являются частью графика. На самом деле, добавьте их в chart.events.load случае, и будут включены в экспортируемый SVG: http://jsfiddle.net/9eqh0xrj/5/

chart: { 
     polar: true, 
     renderTo: 'container', 
     events: { 
      load: modelMe 
     } 
    }, 

И пример для функции:

function modelMe() { 
     var chart = this; 
     //plotting starts from top-left clockwise to bottom-right 
     var colors = [ "orange", "red", "green", "blue" ];  
     var parts = 4; 

     for(var i = 0; i < parts; i++) { 
      chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
           chart.plotTop + chart.yAxis[0].center[1], 
           chart.yAxis[0].height, 
           0, 
           -Math.PI + (Math.PI/(parts/2) * i), 
           -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({ 
       fill: colors[i % colors.length], 
       'stroke-width': 1, 
       'opacity': 0.6 
      }).add(); 
     } 
} 

Во всяком случае, другое решение просто использовать plotBands см : http://jsfiddle.net/9eqh0xrj/6/

xAxis: { 
     categories: [ 
      'Quadrant 1', 
      'Quadrant 2', 
      'Quadrant 3', 
      'Quadrant 4' 
     ], 
     plotBands: [{ 
      innerRadius: 0, 
      from: 0, 
      to: 0.5, 
      color: "red" 
     },{ 
      innerRadius: 0, 
      from: 0.5, 
      to: 1.5, 
      color: "blue" 
     },{ 
      innerRadius: 0, 
      from: 1.5, 
      to: 2.5, 
      color: "orange" 
     },{ 
      innerRadius: 0, 
      from: 2.5, 
      to: 3.5, 
      color: "green" 
     },{ 
      innerRadius: 0, 
      from: 3.5, 
      to: 4, 
      color: "red" 
     }] 
    },