Highcharts renderer: <a href="http://jsfiddle.net/4xwvspmd/" rel="nofollow">this jsfiddle example</a> gösterildiği gibi gömülü SVG resmi

Ben chart.renderer.image() yoluyla benim grafiğe bir SVG tabanlı grafik ekliyorum dolgu rengini:Highcharts renderer: <a href="http://jsfiddle.net/4xwvspmd/" rel="nofollow">this jsfiddle example</a> gösterildiği gibi gömülü SVG resmi

$(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(); 
    }); 
});

orijinal SVG dosyasının kendisini yılında degisebilirim aşağıdaki ile SVG grafiğin dolgu rengi: siyahtan beyaza onu değiştirir

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

. Ama bu rengi dinamik olarak kodda ayarlayabiliyorum. Başarı olmadan çeşitli yollar denedim. Herhangi bir fikir?

kaynak

2016-04-09 drmrbrewer

Görüntü ile mümkün değil. –

Ama bu gerçekten bir görüntü değil. SVG'nin, SVG'yi ekledikten sonra ya da sonrasında dinamik olarak değiştirilebileceğini umduğum öğelerle. Örneğin, http://stackoverflow.com/a/13225606/4070848 – drmrbrewer

gibi bir şey İşlev adı, bir görüntünün ima edildiğini ve belgelerin bunun bir görüntü olduğunu onayladığı anlamına gelir: http://api.highcharts.com/highcharts#Renderer –

Highcharts Renderer kullanarak görüntü ekliyorsanız, görüntü eklenecektir. http://api.highcharts.com/highcharts#Renderer.path

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

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

path: dinamik olarak nitelikleri gibi SVG öğelerini oluştururken başka Renderer yöntemleri kullanmak değiştirmek mümkün olacak SVG öğesi eklemek için
vb

Görüntünüz, bir dizi yoldur bu yüzden yapılması kolay olmalı. Örnek: http://jsfiddle.net/32Lqpe14/

Tüm öğeleri özel bir group'a ekleyebilirsiniz.

EDIT: SVG öğelerini Highcharts Renderer'ı kullanarak orijinal bir SVG görüntüsünden yeniden oluşturmak mümkündür. Dinamik jQuery kullanarak SVG'yi yük olabilir ama CORS sorun bir sorun olabilir, nedenle HTML SVG kullanmak da mümkündür:

Demo: (. Daha fazla bilgi aşağıda yorumları görmek için) http://jsfiddle.net/2mch6ja3/

kaynak

2016-04-11 11:18:41

Ancak, varolan SVG grafikleri (çok) var, tüm bağlantı noktası öneririz Bunların 'yerli' highcharts yol komutları içine? Var olan SVG'yi bir şekilde kullanmanın bir yolu var mı? – drmrbrewer

@drmrbrewer Maalesef grafiğin SVG'sinin bir parçası olarak harici bir SVG'nin eklenmesini sağlayacak varsayılan bir API yok. Ancak, eğer SVG elemanınız varsa, appendChild'i deneyebilirsiniz - daha fazla bilgi: http: // stackoverflow.com/questions/16488884/add-svg-element-to-existing-svg-using-dom –

'renderer.image() 'ile yapıştırma ve bunun gibi bir şeyi kullanma: http://stackoverflow.com/a/11978996/4070848 (veya bu eşdeğer gönderi: http://stackoverflow.com/a/24933495/4070848) – drmrbrewer

Highcharts renderer: <a href="http://jsfiddle.net/4xwvspmd/" rel="nofollow">this jsfiddle example</a> gösterildiği gibi gömülü SVG resmi

cevap

İlgili konular