Highcharts Renderer: Füllfarbe von eingebetteten SVG-Bild

Ich füge eine SVG-basierte Grafik auf mein Diagramm haft chart.renderer.image() wie in this jsfiddle example gezeigt:Highcharts Renderer: Füllfarbe von eingebetteten SVG-Bild

$(function() { 
    $('#container').highcharts({ 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 

    }, function (chart) { // on complete 

    chart.renderer.image('https://cloud3squared.com/files/example.svg', 100, 100, 70, 70) 
      .add(); 
    }); 
});

In der ursprünglichen SVG-Datei selbst, kann ich ändern die Füllfarbe der Grafik in der SVG mit den folgenden:

style="fill:#ffffff;fill-opacity:1"

Das ändert es von schwarz zu weiß. Aber ich möchte diese Farbe dynamisch im Code festlegen können. Ich habe verschiedene Wege ohne Erfolg ausprobiert. Irgendwelche Ideen?

Quelle

2016-04-09 drmrbrewer

Nicht möglich mit einem Bild. –

Aber es ist nicht wirklich ein Bild. Es ist SVG, mit Elementen, von denen ich hoffe, dass sie entweder beim Hinzufügen des SVG oder danach dynamisch geändert werden können. Zum Beispiel, so etwas wie http://stackoverflow.com/a/13225606/4070848 – drmrbrewer

Die Funktion Name schon sagt es ein Bild ist und die Dokumentation bestätigt, es ist ein Bild: http://api.highcharts.com/highcharts#Renderer –

Wenn Sie hinzufügen Bild mit Highcharts Renderer, dann wird ein Bild hinzugefügt werden. Hinzuzufügen SVG-Element, das dynamisch in der Lage, seine Eigenschaften anderen Renderer zu ändern Methoden verwenden, die SVG-Elemente wie schaffen:

path - http://api.highcharts.com/highcharts#Renderer.path
rect-http://api.highcharts.com/highcharts#Renderer.rect
circle - http://api.highcharts.com/highcharts#Renderer.circle

usw.

Ihr Bild ist ein Satz von Pfaden Also sollte es einfach sein. Beispiel: http://jsfiddle.net/32Lqpe14/

Wenn Sie möchten, dass Sie group alle Elemente zu einem benutzerdefinierten hinzufügen könnte.

EDIT: Es ist möglich, SVG-Elemente aus einem Original-SVG-Bild mit Highcharts Renderer neu zu erstellen. Sie könnten SVG dynamisch mit jQuery laden, aber CORS Problem könnte ein Problem sein, so ist es auch möglich SVG von HTML zu verwenden:

Demo: (. Für weitere Informationen Kommentare siehe unten) http://jsfiddle.net/2mch6ja3/

Quelle

2016-04-11 11:18:41

jedoch die svg hinzufügen können, wo Sie (viel) bestehende SVG-Grafiken haben, schlagen Sie vor, dass Sie alle Port von denen in 'native' Highcharts Pfadbefehle? Gibt es eine Möglichkeit, das vorhandene SVG zu verwenden, dieses SVG irgendwie direkt einzubetten? – drmrbrewer

@drmrbrewer Leider gibt es keine Standard-API in Highcharts, die als Teil des Diagramms SVG einschließlich einer externen SVG erlauben würde. Sie könnten jedoch versuchen, Child anzufügen, wenn Sie über SVG-Elemente verfügen - weitere Informationen: http: // stackoverflow.com/questions/16488884/add-svg-element-zu-existing-svg-using-dom –

Wie wäre es mit 'renderer.image()' und mit etwas wie folgt: http://StackOverflow.com/a/11978996/4070848 (oder diesen gleichwertigen Beitrag: http://stackoverflow.com/a/24933495/4070848) – drmrbrewer

Highcharts Renderer: Füllfarbe von eingebetteten SVG-Bild

Antwort

Verwandte Themen