在高地图中划线时，突出显示区域线图

我有一个使用高图形创建的区域。我遇到的问题是，当线条越过另一条线时，它的颜色变浅。我如何保持线条颜色相同，或者当我将鼠标悬停在线上以突出显示而不会使其变浅时。在高地图中划线时，突出显示区域线图

以及如何更改工具提示颜色以匹配线条颜色？

下面是我的代码

$(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)'] 
        ] 
       } 
    } 
     ] 
    }); 
});

这里是我的小提琴http://jsfiddle.net/tyz25j1p/3/

任何帮助将不胜感激

来源

2016-07-30 LiveEn

第一个问题，如果你想带他们出去鼠标悬停@ davcs86的回答是好，但如果你不希望线条被遮挡，你必须将它们分成一系列单独的区域，并在区域系列之后加入zIndex。

第二个问题，一个简单的方法来设置背景颜色可以是挂钩的tooltipRefresh事件，并设置它的基础上悬停系列：

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); 
     } 
     } 
    }

工作代码在这里：

<!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>

来源

2016-07-30 17:59:07 Mark

可以使用.toFront()功能

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

工具提示，你可以检查出this answer

例

$(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>

来源

2016-07-30 17:43:12 davcs86

在高地图中划线时，突出显示区域线图

回答

相关问题