隱藏/顯示yaxis系列隱藏/顯示事件

Question

我正在製作多個面板圖表，並且我正試圖隱藏軸系列隱藏事件上的y軸。

我試着設置軸的高度，並重新繪製它（沒有工作），設置極值，沒有任何工作。我也嘗試了這個solution，但沒有工作，我認爲它沒有工作，因爲我使用highstock和「解決方案」使用Highcharts，這是否有意義？

我還必須調整其他y軸，當一個隱藏，但這是另一個問題。但如果有人有小費如何自動執行它將是感激

這裏是我的JSFiddle code。

$(function() { 
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {   
    var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ]; 
    var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];  
    var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];  
    var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ]; 

    // create the chart 
    var chart = $('#container').highcharts('StockChart', { 

     title: { 
      text: 'AAPL Historical' 
     }, 
     legend: { 
      enabled: true 
     },    

     plotOptions: { 
      series: { 
       events: { 
        hide: function (event) { 
         console.log(this.yAxis) 
         //Hide 
        }, 
        show: function (event) { 
         console.log(this.yAxis) 
         //Display 
        } 
       } 
      } 
     }, 

     tooltip: { 
      pointFormatter: function() { 
       var state = (this.y == 1 ? "Active" : "Inactive"); 
       var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>' 

       return tooltip; 
      } 
     }, 

     yAxis: [{ 
      height: '25%', 
      offset: 0, 
      lineWidth: 2, 
      labels: {enabled: false} 
     }, { 
      top: '25%', 
      height: '25%', 
      offset: 0, 
      lineWidth: 2, 
      labels: {enabled: false}, 
      title : { 
       text: "aaa" 
      } 
     }, { 
      top: '50%', 
      height: '25%', 
      offset: 0, 
      lineWidth: 2, 
      labels: {enabled: false} 
     }, { 
      top: '75%', 
      height: '25%', 
      offset: 0, 
      lineWidth: 2, 
      labels: {enabled: false} 
     }], 

     series: [{ 
      name: 'Data1', 
      data: data1, 
      step: true, 
      yAxis: 0 
     }, { 
      name: 'Data2', 
      data: data2, 
      step: true, 
      yAxis: 1 
     }, { 
      name: 'Data3', 
      data: data3, 
      step: true, 
      yAxis: 2 
     }, { 
      name: 'Data4', 
      data: data4, 
      step: true, 
      yAxis: 3 
     }] 
    }); 
}); 

}）;

Answer 1

我在solution上工作得更多，我找到了一種隱藏y軸的方法，在系列隱藏事件中將其高度更改爲0％。在系列節目中，我也將軸高度提高到了25％。

plotOptions: { 
    series: { 
     events: { 
      hide: function (event) { 
       this.yAxis.update({ 
        height: '0%' 
       }); 
      }, 
      show: function (event) { 
       this.yAxis.update({ 
        height: '25%' 
       }); 
      } 
     } 
    } 
}, 

完全code

編輯：

我找到了一種方法來調整其他y軸時，其中一個是隱藏或顯示一個軸。 您可以查看完整的code。

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {   
     var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ]; 
     var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];  
     var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];  
     var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ]; 

     // create the chart 
     var chart = $('#container').highcharts('StockChart', { 

      title: { 
       text: 'AAPL Historical' 
      }, 
      legend: { 
       enabled: true 
      },    

      plotOptions: { 
       series: { 
        marker: { 
         enabled: true, 
         radius : 2 
        }, 
        events: { 
         hide: function (event) { 
          var serieYAxis = this.yAxis; 
          serieYAxis.visivel = false; 
          serieYAxis.update({ 
           height: '0%', 
           title: { 
            style: {"display":"none"} 
           } 
          }); 

          var axis = this.chart.yAxis.filter(
           function (axis) { 
            return axis.visivel == null || axis.visivel; 
           } 
          ); 
          resizeAxis(axis); 

         }, 
         show: function (event) { 
          this.yAxis.visivel = true; 
          this.yAxis.update({ 
           title: { 
            style: {"display":"initial"} 
           } 
          }); 

          var axis = this.chart.yAxis.filter(
           function (axis) { 
            return axis.visivel == null || axis.visivel; 
           } 
          ); 


          resizeAxis(axis); 
         } 
        } 
       } 
      }, 

      tooltip: { 
       pointFormatter: function() { 
        var state = (this.y == 1 ? "Active" : "Inactive"); 
        var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>' 

        return tooltip; 
       } 
      }, 

      yAxis: [{ 
       height: '25%', 
       offset: 0, 
       lineWidth: 2, 
       labels: {enabled: false}, 
       title : { 
        text: "y0" 
       } 
      }, { 
       top: '25%', 
       height: '25%', 
       offset: 0, 
       lineWidth: 2, 
       labels: {enabled: false}, 
       title : { 
        text: "y1" 
       } 
      }, { 
       top: '50%', 
       height: '25%', 
       offset: 0, 
       lineWidth: 2, 
       labels: {enabled: false}, 
       title : { 
        text: "y2" 
       } 
      }, { 
       top: '75%', 
       height: '25%', 
       offset: 0, 
       lineWidth: 2, 
       labels: {enabled: false}, 
       title : { 
        text: "y3" 
       } 
      }], 

      series: [{ 
       name: 'Data1', 
       data: data1, 
       step: true, 
       yAxis: 0 
      }, { 
       name: 'Data2', 
       data: data2, 
       step: true, 
       yAxis: 1 
      }, { 
       name: 'Data3', 
       data: data3, 
       step: true, 
       yAxis: 2 
      }, { 
       name: 'Data4', 
       data: data4, 
       step: true, 
       yAxis: 3 
      }] 
     }); 
    }); 


});