Highchart显示/隐藏与多个关联系列的y轴

我正在使用Highchart。我有一个多个系列图，其中几个系列可以关联到相同的y轴。该关联基于测量单位，这也是y轴id。系列动态添加。Highchart显示/隐藏与多个关联系列的y轴

每个y轴的setExtremes（）都不是null，因此我遇到了一个看起来无法解决的问题。

当隐藏一系列。我想要关联的y轴是可见的，直到与该特定轴关联的所有序列都被隐藏。此刻，我能只是用来掩饰y轴一次的系列产品之一被设置为series.hide（）

所使用的代码如下所示。并可以通过这样的jsfiddle访问：http://jsfiddle.net/39xBU/134/。

$(function() { 
//creates chart options 
    var options = { 
     chart: { 
      renderTo: 'container', 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Axis manipulation' 
     }, 
     xAxis: [{ 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }], 
     yAxis: [{ // Primary yAxis 
      id:'°C', 
      labels: { 
       formatter: function() { 
        return this.value +'°C'; 
       }, 
       style: { 
        color: '#89A54E' 
       } 
      }, 
      title:{ 
       text:'' 
      }, 
      opposite: true, 
      showEmpty: false 

     }, { // Secondary yAxis 
      id:'mm', 
      gridLineWidth: 0, 
      labels: { 
       formatter: function() { 
        return this.value +' mm'; 
       }, 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      title:{ 
       text:'' 
      }, 
      showEmpty: false 

     }], 
     tooltip: { 
      formatter: function() { 
       var unit = { 
        'Rainfall': 'mm', 
        'Temperature': '°C', 
        'Sea-Level Pressure': 'mb' 
       }[this.series.name]; 

       return ''+ 
        this.x +': '+ this.y +' '+ unit; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      x: 120, 
      verticalAlign: 'top', 
      y: 80, 
      floating: true, 
      backgroundColor: '#FFFFFF' 
     }, 
     series: [] 
    }; 

// Adds series to the chart. i do this because in the real application I add data dinamically 
options.series.push({ 
      name: 'Rainfall', 
      color: '#4572A7', 
      type: 'spline', 
      yAxis: getAssociativeYAxisIndex('mm', options.yAxis), 
      data: [149.9, 171.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4] 
     }); 
options.series.push({ 
      name: 'Sea-Level Pressure', 
      type: 'spline', 
      color: '#4572A7', 
      yAxis: getAssociativeYAxisIndex('mm', options.yAxis), 
      data: [116, 116, 115.9, 115.5, 112.3, 109.5, 109.6, 110.2, 113.1, 116.9, 118.2, 116.7], 
      marker: { 
       enabled: false 
      }, 
      dashStyle: 'shortdot' 
     }); 
options.series.push({ 
      name: 'Temperature', 
      color: '#89A54E', 
      type: 'column', // date is not shown only if it is 'spline' 
      yAxis:getAssociativeYAxisIndex('°C', options.yAxis), 
      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] 
     }); 

var chart = new Highcharts.Chart(options); 

//after rendering I set axis limits, based on their measurement unit. 
var yAxis1 = chart.get('mm'); 
yAxis1.setExtremes(0, 200); 

var yAxis2 = chart.get('°C'); 
yAxis2.setExtremes(0, 40); 

// hide Rainfall button 
    $("#b1").click(function(){ 
     chart.series[0].hide() 
     chart.yAxis[1].update({ 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: null 
      } 
     }); 
    }); 

// hide sealevel button 
    $("#b").click(function(){ 
     chart.series[1].hide() 
     chart.yAxis[1].update({ 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: null 
      } 
     }); 
    }); 

// delete rainfall button 
    $("#b2").click(function(){ 
     chart.series[0].remove(); 
     chart.yAxis[1].setExtremes(null, null); 
    });  

// delete sea-level button 
    $("#b3").click(function(){ 
     chart.series[1].remove(); 
      chart.yAxis[1].setExtremes(null, null); 
    }); 
//get's series associatie axis 
function getAssociativeYAxisIndex(seriesMeasureUnit, yAxis) { 
     var axisIndex = -1; 

     $.each(yAxis, function (index, axes) { 
      if (seriesMeasureUnit == axes.id) { 
       axisIndex = index; 
       return false; 
      } 
     }); 

     return axisIndex; 
    };

}）;

对这个问题的任何建议将是非常有用的。

来源

2014-06-25 AndraH

你可以简单地检查是否所有系列是隐藏的，是这样的：http://jsfiddle.net/39xBU/135/

和代码：

新的功能，以方便阅读：

function hideShowAxis(series) { 
    var axis = series.yAxis, 
     show = false; 
    $.each(axis.series, function (i, e) { 
     if (e.visible) { 
      show = true; 
     } 
    }); 
    axis.update({ 
     labels: { 
      enabled: show 
     } 
    }); 
}

并执行：

// hide Rainfall button 
$("#b1").click(function() { 
    chart.series[0].hide() 
    hideShowAxis(chart.series[0]); 
}); 

// hide sealevel button 
$("#b").click(function() { 
    chart.series[1].hide() 
    hideShowAxis(chart.series[1]); 
});

来源

2014-06-25 12:44:55

Highchart显示/隐藏与多个关联系列的y轴

回答

相关问题