Wie kann ich ein Wasserzeichenbild in meinem Highchart aus dem lokalen Verzeichnis rendern?

Question

Ich habe ein Bild, das ich als Wasserzeichen auf meinem Diagramm darstellen möchte. Ich sah die Dokumentation der offiziellen Highcharts-Website über die Renderer.image-Methode, aber das betrifft nur eine externe Ressource. Gibt es trotzdem ein Bild von meinem app/assets/images Verzeichnis?

Answer 1

Sie können ein Bild als Wasserzeichen in ein Diagramm mit Renderer.image wie folgt hinzu:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function() { 
       this.renderer.image('../img/logo.png', 6, 6, 45, 32) 
        .add(); 
      } 
     } 
    }, 

    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] 
    }], 

    exporting: { 
     enableImages: true 
    } 
}); 

Arbeitsbeispiel hier: http://jsfiddle.net/tLpL98L2/1/

Beachten Sie, dass das Wasserzeichen JSFiddle-Logo ist das ein relativ URL, keine absolute URL Sie müssen http:// nicht angeben, wenn Sie die Funktion renderer.image verwenden, damit Sie Bilder auf Ihrem eigenen Server verwenden können.