2013-02-27 78 views
0

我有一个包含两个区域系列的图表,第二个系列的fillOpacity为0.01,我想在单击第一个图例时更改该系列的fillOpacity。我会怎么做呢?Highcharts在legendItemClick上更改了一系列填充不透明度

My jsfiddle

chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +'°C'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      type: 'area', 
      events: { 
       legendItemClick: function() { 
           chart.series[1].fillOpacity = 0.75; 
           chart.redraw(); 
       } 
      }, 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      type: 'area', 
      fillOpacity: '0.01', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, 
      { 
      name: 'New York', 
      type: 'area', 
      fillOpacity: '0.01', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }] 
    }); 

回答

0

可检查“链接传奇”是由指数点击,然后修改ARWA SVG对象(下系列线),并设置自己的背景。

if((this.index==0) { 
         //set background for second serie 
         this.chart.series[1].area.attr({ 
          fill:'rgba(170,70,67,0.5)' 
         }); 
        } 

http://jsfiddle.net/4nd7d/5/

+0

这完美地工作,谢谢! – JvnD 2013-03-05 23:36:17