Falsch angezeigtes Plot-Band-Symbol in Highcharts

Question

Ich versuche, ein Diagramm mit Plot-Bändern in Highcharts zu erstellen, in das ich ein Symbol in das Plot-Band einfügen möchte.

Es funktioniert alles gut, außer dass ich das Symbol nicht unter der tatsächlichen Serienlinie anzeigen lassen kann. Ich setze den zIndex des Symbols auf 1 und die Reihe auf 2, aber es scheint nichts zu tun.

ich in der Dokumentation sah hier: http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex

Aber es sollte auf dieser Grundlage arbeiten, aber es nicht, es funktioniert, wenn ich Text für das Label verwenden, aber kein Bild und das Objekt hat keine spezifischen Klasse oder ID, so dass ich es mit jquery anvisieren und die css manuell einstellen konnte.

Zu meinem Punkt zu verdeutlichen habe ich eine Geige:

http://jsfiddle.net/qwfj4x3j/

ich zum Beispiel verwendet

{ 
    color: null, 
    zIndex: -1, 
    from: 3.5, 
    to: 4.5, 
    label: { 
     text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>", 
    verticalAlign: 'top', 
    useHTML: true, 
    y: 25 
    } 

},

Wie Sie sehen können, habe ich die zIndex beide das Plot Band und das eigentliche Bild, und ein höherer zIndex für die Serie, aber es funktioniert nicht.

Answer 1

Wenn Sie ein Bild auf diese Art und Weise rendern, wird HTML an der Spitze der SVG gerendert - das ist der Grund, warum das Bild Svg-Elemente abdeckt. Stattdessen können Sie die Methode chart.renderer.image() in Verbindung mit axis.toPixels() -Methoden verwenden, um x, y-Attribute in Pixeln zu erhalten.

var img; 

function renderImage() { 
    var chart = this; 
    img = chart.renderer.image(
       'http://simpleicon.com/wp-content/uploads/rain.png', 
       chart.xAxis[0].toPixels(0), 
       chart.yAxis[0].toPixels(10), 
       150, 
       150 
     ) 
      .add(); 
} 

function redrawImage() { 
    img.attr({ 
     x: this.xAxis[0].toPixels(0), 
     y: this.yAxis[0].toPixels(10) 
    }); 
} 

Beispiel: http://jsfiddle.net/qwfj4x3j/2/

das Bild reagiert, wie Plotlinien Sie x anpassen müssen haben, y-Attribute auf Neuzeichnen Ereignis.

Answer 2

OK, so am Ende fand ich eine sehr elegante Lösung :) Ich gab allen Bildern eine Klasse und dann, nachdem der Graph gerendert wurde, rufe ich jquery Befehl, der alle Elternelemente dieser Klasse, die Span I zielt Ursprünglich benötigt um zu zielen, konnte aber nicht, weil es keine Klasse oder ID hatte. Jetzt kann ich all dies als Eltern meines Bildes mit einer bestimmten Klasse nennen, z-index von -1 zuweisen und es funktioniert :)