2016-07-30 5 views
1

Im Bereich mit denen ich mit Highcharts erstellt haben. Das Problem, das ich habe, ist, wenn die Linie eine andere kreuzt, wird sie heller. Wie halte ich die Linienfarbe gleich oder wenn ich über die Linie schwebe, um sie hervorzuheben und zu zeigen, ohne sie heller zu machen.Highlight Bereich Chart Linien, wenn in highcharts

und wie ändere ich die Tooltip-Farbe, um die Linienfarbe zu entsprechen?

enter image description here

Unten ist mein Code

$(function() { 
    var marker = { 
     radius: 4, 
     fillColor: '#FFFFFF', 
     lineWidth: 2, 
     symbol: 'circle', 
     lineColor: null // inherit from series 
     }; 

    var chart = new Highcharts.Chart({ 
    credits: { enabled: false }, 
    chart: { 
     renderTo: 'container', 
     type: 'area', 
     width: 600, 
     height: 400 
    }, 
    title: { text: 'Title', x: -20 //center 
      }, 
    subtitle: {text: 'Subtitle', x: -20 }, 
    //title: { text: null }, 
    xAxis: { 
     categories: [ 
      'NOV 11' , 
      'DEC 11' , 
      'JAN 12' , 
      'FEB 12' , 
      'MAR 12' , 
      'APR 12' , 
      'MAY 12' , 
     ], 
     gridLineColor: '#DCEBEF', 
     gridLineWidth: 0.5, 
     lineColor: '#ffffff', 
     lineWidth: 1 
     //gridLineDashStyle: 'dash' 
    }, 
    legend: { 
     enabled: false 
    }, 
    yAxis: { 
     title: { 
     text: null 
     }, 
     gridLineColor: '#DCEBEF', 
     lineColor: '#ffffff', 
     lineWidth: 1, 
     gridLineDashStyle: 'dash' 
    }, 
    tooltip: { 
     formatter: function() { 
      return this.y; 
     }, 
     backgroundColor: 'Grey', 
     borderWidth: 1, 
     borderColor: '#AAA', 
     style: { 
      fontWeight: 'bold', 
      color: 'White' 
     } 
    }, 
    plotOptions: { 
     area: { 
     fillOpacity: 0.08 
     } 
    }, 
    series: [{ 
     name: null, 
     lineWidth: 2, 
     color: '#FA918C', 
     marker: marker, 
     data: [ 500, 500, 800, 1500, 1250, 800, 1150,], 
     zIndex: 2, 
     fillColor: { 
        linearGradient: [0, 0, 0,250], 
        stops: [ 
         [0, 'rgba(250,145,150,0.5)'], 
         [1, 'rgba(255,255,255,0.5)'] 
        ] 
       } 
    }, 
    { 
     name: null, 
     lineWidth: 2, 
     color: '#674313', 
     marker: marker, 
     data: [ 1500, 500, 800, 1500, 1050, 1800, 150,], 
     zIndex: 2, 
     fillColor: { 
        linearGradient: [0, 0, 0,250], 
        stops: [ 
         [0, 'rgba(250,145,150,0.5)'], 
         [1, 'rgba(255,255,255,0.5)'] 
        ] 
       } 
    }, 
     { 
     name: null, 
     lineWidth: 2, 
     color: '#87BCC2', 
     marker: marker, 
     data: [ 700, 950, 1100, 2000, 1650, 900, 1250,], 
     zIndex: 1, 
     fillColor: { 
        linearGradient: [0, 0, 0, 250], 
        stops: [ 
         [0, 'rgba(135,188,194,0.5)'], 
         [1, 'rgba(255,255,255,0.5)'] 
        ] 
       } 
    } 
     ] 
    }); 
}); 

Hier meine Geige http://jsfiddle.net/tyz25j1p/3/ ist

Jede Hilfe

Antwort

1

Erste Frage überprüfen, Antwort @ davcs86 das ist gut, wenn man sie aus der Maus darüber bringen wollen, aber wenn Sie nicht wollen, dass die Linien überhaupt verdunkelt werden, müssten Sie sie in eine separate Reihe und zIndex sie nach der Bereichsreihe teilen.

Zweite Frage, ein einfacher Weg, um die Hintergrundfarbe einstellen könnte das tooltipRefresh Ereignis Haken und legen Sie es auf der Grundlage der hovered Serie:

chart: { 
     renderTo: 'container', 
     width: 600, 
     height: 400, 
     type: 'area', 
     events: { 
     tooltipRefresh: function(e) { 
      if (!e.target.hoverSeries) return; 
      $('.highcharts-tooltip>path:last-of-type') 
      .css('fill', e.target.hoverSeries.color); 
     } 
     } 
    } 

Arbeitscode hier:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="container" style="height: 400px; width: 600"></div> 
 
    <script> 
 
    $(function() { 
 
     var marker = { 
 
     radius: 4, 
 
     fillColor: '#FFFFFF', 
 
     lineWidth: 2, 
 
     symbol: 'circle', 
 
     lineColor: null // inherit from series 
 
     }; 
 

 
     var chart = new Highcharts.Chart({ 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     chart: { 
 
      renderTo: 'container', 
 
      width: 600, 
 
      height: 400, 
 
      events: { 
 
      tooltipRefresh: function(e) { 
 

 
       if (!e.target.hoverSeries) return; 
 

 
       $('.highcharts-tooltip>path:last-of-type') 
 
       .css('fill', e.target.hoverSeries.color); 
 
      } 
 
      } 
 
     }, 
 
     title: { 
 
      text: 'Title', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: 'Subtitle', 
 
      x: -20 
 
     }, 
 
     //title: { text: null }, 
 
     xAxis: { 
 
      categories: [ 
 
      'NOV 11', 
 
      'DEC 11', 
 
      'JAN 12', 
 
      'FEB 12', 
 
      'MAR 12', 
 
      'APR 12', 
 
      'MAY 12', 
 
      ], 
 
      gridLineColor: '#DCEBEF', 
 
      gridLineWidth: 0.5, 
 
      lineColor: '#ffffff', 
 
      lineWidth: 1 
 
      //gridLineDashStyle: 'dash' 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
      text: null 
 
      }, 
 
      gridLineColor: '#DCEBEF', 
 
      lineColor: '#ffffff', 
 
      lineWidth: 1, 
 
      gridLineDashStyle: 'dash' 
 
     }, 
 
     tooltip: { 
 
      formatter: function() { 
 
      return this.y; 
 
      }, 
 
      backgroundColor: 'Grey', 
 
      borderWidth: 1, 
 
      borderColor: '#AAA', 
 
      style: { 
 
      fontWeight: 'bold', 
 
      color: 'White' 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      area: { 
 
      fillOpacity: 0.08 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: null, 
 
      lineWidth: 0, 
 
      marker: { 
 
      enabled: false 
 
      }, 
 
      color: '#FA918C', 
 
      type: "area", 
 
      data: [500, 500, 800, 1500, 1250, 800, 1150, ], 
 
      zIndex: 2, 
 
      fillColor: { 
 
      linearGradient: [0, 0, 0, 250], 
 
      stops: [ 
 
       [0, 'rgba(250,145,150,0.5)'], 
 
       [1, 'rgba(255,255,255,0.5)'] 
 
      ] 
 
      } 
 
     }, { 
 
      name: null, 
 
      lineWidth: 0, 
 
      color: '#000000', 
 
      type: 'area', 
 
      marker: { 
 
      enabled: false 
 
      }, 
 
      data: [1500, 500, 800, 1500, 1050, 1800, 150, ], 
 
      zIndex: 2, 
 
      fillColor: { 
 
      linearGradient: [0, 0, 0, 250], 
 
      stops: [ 
 
       [0, 'rgba(250,145,150,0.5)'], 
 
       [1, 'rgba(255,255,255,0.5)'] 
 
      ] 
 
      } 
 
     }, { 
 
      name: null, 
 
      lineWidth: 0, 
 
      color: '#87BCC2', 
 
      type: 'area', 
 
      marker: { 
 
      enabled: false 
 
      }, 
 
      data: [700, 950, 1100, 2000, 1650, 900, 1250, ], 
 
      zIndex: 1, 
 
      fillColor: { 
 
      linearGradient: [0, 0, 0, 250], 
 
      stops: [ 
 
       [0, 'rgba(135,188,194,0.5)'], 
 
       [1, 'rgba(255,255,255,0.5)'] 
 
      ] 
 
      } 
 
     }, { 
 
      name: null, 
 
      lineWidth: 2, 
 
      color: '#FA918C', 
 
      marker: marker, 
 
      zIndex: 3, 
 
      data: [500, 500, 800, 1500, 1250, 800, 1150, ] 
 
     }, { 
 
      name: null, 
 
      lineWidth: 2, 
 
      color: '#000000', 
 
      type: 'area', 
 
      marker: marker, 
 
      data: [1500, 500, 800, 1500, 1050, 1800, 150, ], 
 
      zIndex: 3, 
 
     }, { 
 
      name: null, 
 
      lineWidth: 2, 
 
      color: '#87BCC2', 
 
      marker: marker, 
 
      data: [700, 950, 1100, 2000, 1650, 900, 1250, ], 
 
      zIndex: 3 
 
     }] 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

1

Sie können .toFront() Funktion

plotOptions: { 
    area: { 
     fillOpacity: 0.08, 
     events: { 
      mouseOver: function(e) { 
       this.group.toFront(); 
       this.markerGroup.toFront(); 
      } 
     } 
    } 
} 
geschätzt wird

Für den Tooltip können Sie this answer

Beispiel

$(function() { 
 
    var marker = { 
 
    radius: 4, 
 
    fillColor: '#FFFFFF', 
 
    lineWidth: 2, 
 
    symbol: 'circle', 
 
    lineColor: null // inherit from series 
 
    }; 
 

 
    var chart = new Highcharts.Chart({ 
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    chart: { 
 
     renderTo: 'container', 
 
     type: 'area', 
 
     width: 600, 
 
     height: 400 
 
    }, 
 
    title: { 
 
     text: 'Title', 
 
     x: -20 //center 
 
    }, 
 
    subtitle: { 
 
     text: 'Subtitle', 
 
     x: -20 
 
    }, 
 
    //title: { text: null }, 
 
    xAxis: { 
 
     categories: [ 
 
     'NOV 11', 
 
     'DEC 11', 
 
     'JAN 12', 
 
     'FEB 12', 
 
     'MAR 12', 
 
     'APR 12', 
 
     'MAY 12', 
 
     ], 
 
     gridLineColor: '#DCEBEF', 
 
     gridLineWidth: 0.5, 
 
     lineColor: '#ffffff', 
 
     lineWidth: 1 
 
     //gridLineDashStyle: 'dash' 
 
    }, 
 
    legend: { 
 
     enabled: false 
 
    }, 
 
    yAxis: { 
 
     title: { 
 
     text: null 
 
     }, 
 
     gridLineColor: '#DCEBEF', 
 
     lineColor: '#ffffff', 
 
     lineWidth: 1, 
 
     gridLineDashStyle: 'dash' 
 
    }, 
 
    tooltip: { 
 
     formatter: function() { 
 
     return this.y; 
 
     }, 
 
     backgroundColor: 'Grey', 
 
     borderWidth: 1, 
 
     borderColor: '#AAA', 
 
     style: { 
 
     fontWeight: 'bold', 
 
     color: 'White' 
 
     } 
 
    }, 
 
    plotOptions: { 
 
     area: { 
 
     fillOpacity: 0.08, 
 
     events: { 
 
      mouseOver: function(e) { 
 
      this.group.toFront(); 
 
      this.markerGroup.toFront(); 
 
      } 
 
     } 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: null, 
 
     lineWidth: 2, 
 
     color: '#FA918C', 
 
     marker: marker, 
 
     data: [500, 500, 800, 1500, 1250, 800, 1150, ], 
 
     fillColor: { 
 
     linearGradient: [0, 0, 0, 250], 
 
     stops: [ 
 
      [0, 'rgba(250,145,150,0.5)'], 
 
      [1, 'rgba(255,255,255,0.5)'] 
 
     ] 
 
     } 
 
    }, { 
 
     name: null, 
 
     lineWidth: 2, 
 
     color: '#000000', 
 
     marker: marker, 
 
     data: [1500, 500, 800, 1500, 1050, 1800, 150, ], 
 
     fillColor: { 
 
     linearGradient: [0, 0, 0, 250], 
 
     stops: [ 
 
      [0, 'rgba(250,145,150,0.5)'], 
 
      [1, 'rgba(255,255,255,0.5)'] 
 
     ] 
 
     } 
 
    }, { 
 
     name: null, 
 
     lineWidth: 2, 
 
     color: '#87BCC2', 
 
     marker: marker, 
 
     data: [700, 950, 1100, 2000, 1650, 900, 1250, ], 
 
     fillColor: { 
 
     linearGradient: [0, 0, 0, 250], 
 
     stops: [ 
 
      [0, 'rgba(135,188,194,0.5)'], 
 
      [1, 'rgba(255,255,255,0.5)'] 
 
     ] 
 
     } 
 
    }] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px; width: 600"></div>