2016-07-08 67 views
0

我想要控制只使用导航器启用x轴缩放的高架图上的缩放按钮的可见性。高点重置缩放按钮

默认情况下,该组合显示核心代码禁用缩放按钮。但是有一些功能可以让你显示按钮,但我找不到一个隐藏它。

function createChart() { 
    $('#container').highcharts('StockChart', { 
     chart: { 
      zoomType: "x", 
      panning: true, 
      panKey: "shift" 
     }, 
     rangeSelector: { 
      selected: 4 
     }, 
     xAxis: { 
      events: { 
       setExtremes: xAxisExtremes 
      }, 
     }, 
     yAxis: { 
      labels: { 
       formatter: function() { 
        return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
       } 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 2, 
       color: 'silver' 
      }] 
     }, 
     series: seriesOptions 
    }); 
} 

function xAxisExtremes(e) { 
    var chart = $('#container').highcharts(); 

    if (e.trigger === "zoom") { 
     if (e.min && e.max) { 
      chart.showResetZoom(); 
     } else { 
      alert("Reset Zoom"); 
      // chart.hideResetZoom(); ???? 
     } 
    } 
} 

看到这个小提琴的例子与我一起工作。 https://jsfiddle.net/sooftcL7/3/

点击进入xAxis setExtremes事件允许我使用触发器标识符来检测出现的缩放事件。我可以使用chart.showResetZoom();

我都试过

chart.resetZoomButton.destroy() 
chart.resetZoomButton.hide() 

其他地方的建议,但他们都没有定义的功能。

任何帮助,将不胜感激。

干杯,

D.

+0

您可以更改标准Highstock Axis.prototype.zoom函数,以添加显示和隐藏缩放按钮的功能。在这里你可以找到一个例子它如何工作:https://jsfiddle.net/sooftcL7/4/ –

回答

1

您必须禁用导航去除底栏并禁用rangeSelector去除变焦按钮

$('#container').highcharts('StockChart', { 
    ... 
    rangeSelector : { 
     enabled: false 
    }, 
    navigator: { 
     enabled: false 
    } 
    ... 
}); 

检查这个 http://jsfiddle.net/CgAnW/

+1

谢谢zoro, 我知道,禁用导航器将启用缩放按钮的默认设置。不过,我特别需要导航仪。 我想发现的是,如果有隐藏缩放按钮的方法就像显示它。 干杯, D. – Dave

0

只有当resetZoomButton是一个对象时,才可以调用resetZoomButton.destroy()函数。根据Highsotck来源:

对于股票图表(...)X轴缩放已被导航器和范围选择器允许。

if (zoomType === 'x') { 
     chart.resetZoomButton = 'blocked'; // replaced with string 
    } 

因此,要破解这个你可以简单地做:

chart: { 
     zoomType: 'xz' // whatever string containg x 
    } 

这意味着变焦类型保持“X”,但你忽略这个丑陋的if语句它取代resetZoomButton对象与一些随机字符串...