Konsole Fehler beim Ändern der Linienfarbe in einem HighCharts Scatterplot

Question

I this Lösung angenommen haben die Linienfarbe zu ändern, wenn eine Serie in einem HighCharts Scatterplot (JSFiddle Demo here) schwebt:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'scatter', 
     }, 
     plotOptions: { 
      scatter: { 
       lineWidth:1, 
       marker: { 
        radius: 1, 
        symbol:'circle', 
        fillColor: '#800000', 
        states: { 
         hover: { 
          enabled: true, 
          radius:0, 
          radiusPlus:2, 
          lineColor: '#ff0000', 
          fillColor: '#ff0000' 
         } 
        } 
       }, 
       events: { 
        mouseOver: function() { 

         this.chart.series[this.index].update({ 
          color: 'red' 
         }); 
        }, 
        mouseOut: function() { 

         this.chart.series[this.index].update({ 
          color: "#b0b0b0" 
         });       
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'A', 
      color: "#b0b0b0", 
      data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35,marker:{radius:8,symbol:'circle'}} 
      ] 
     }, { 
      name: 'B', 
      color: "#b0b0b0", 
      data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57,marker:{radius:8,symbol:'circle'}} 
      ] 
     }] 
    }); 
}); 

Das Skript funktioniert, aber läuft Die Webkonsole Ich sehe, dass jedes Schweben einer Serie eine TypeError: g.firePointEvent is not a function error verursacht.

In einem anderen meiner Skripte ist der Fehler TypeError: hoverPoint.firePointEvent is not a function.

Ist dies ein Fehler von HighCharts oder ist es möglich, es zu vermeiden?

Answer 1

Das Problem wird durch das Update verursacht, das vor Ihrer Aktion aufgerufen wird. Als Ergebnis versuchen Sie, auf den aktualisierten Punkt vor dem Ende zu verweisen. Die Lösung ist verwenden Sie die Methode attr() und ändern Sie die SVG-Farbe auf dem Pfad.

events: { 
     mouseOver: function() { 

     this.chart.series[this.index].graph.attr({ 
      stroke: 'red' 
     }); 
     }, 
     mouseOut: function() { 
        this.chart.series[this.index].graph.attr({ 
      stroke: '#b0b0b0' 
     }); 
     } 
    } 

Demo:

• http://jsfiddle.net/53ob1pu2.