Probleme mit benutzerdefinierten Rahmen um Highcharts Stacked Bars und Deaktivieren von Hover-Effekt

Question

Ich habe ein gestapeltes Balkendiagramm, wo ich benutzerdefinierten Rahmen beantrage nachdem das Diagramm dh

},function(chart){ 
    chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2}) 
    chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2}) 

Dies funktioniert gut, mit Ausnahme der Tatsache, dass die geladen ist linker Rand Strich zeigt nicht die volle Breite dh

das sind meine plotOptions:

plotOptions: { 
     series: {   
      states: { 
       hover: { 
        enabled: false 
        } 
      },   
      stacking: 'normal', 
      pointPadding: 0.1, 
      borderWidth: 0, 
      lineWidth: 0, 
      dataLabels: { 
       enabled: true, 
       formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; }, 
       useHTML: true, 
       connectorWidth: 1, 
       style: { 
        fontSize: "14px", 
        color: '#FFFFFF', 
        fontWeight: 'normal' 
       } 
      } 
     } 
    }, 

Zusätzlich, obwohl ich habe den Hover-Effekt deaktiviert (wie Sie in dem plotOptions oben sehen können), wenn Sie die Maus über die markierten Balken, die gelbe Grenze Änderungen wissen:

NACH Schweben

Alle Hinweise zur Lösung dieser Probleme sind willkommen.

Answer 1

FIXED - Hover Ausgabe konnte ich plotOptions verwenden: {Serie: {enableMouseTracking: false}}} alle Maus-Interaktion deaktivieren. Dies löste den Hover-Effekt, den Rand wieder in Weiß zu ändern.

Wenn Sie Maus Interaktion beibehalten müssen, aktivieren Sie einfach die Farbe Standard Grenze Ihre hervorgehoben ein dh plotOptions sein: {bar: {border: "gelb"}}

Answer 2

FIXED - SVG Border Ausgabe auf Stacked-Charts Es ist ein wenig wie ein Hack aber ich verwenden Erstellungsfunktion eine jQuery in der post-Diagramm 1 Pixel von der Höhe der Stange zu entfernen, und 1 Pixel auf den y-Wert hinzuzufügen, für die gestapelten betroffen bar dh

$(".highcharts-series:gt(0) rect").each(function(index,value) { 
     $(this).attr("height",$(this).attr("height")-1); 
     $(this).attr("y",parseInt($(this).attr("y"))+1);