关于 javascript:highcharts 重置缩放按钮


highcharts reset zoom button

我正在尝试仅在启用导航器的情况下使用 x 轴缩放来控制 highstock 图表上缩放按钮的可见性。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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();

打开按钮

我都试过了

1
2
chart.resetZoomButton.destroy()
chart.resetZoomButton.hide()

正如其他地方所建议的，但它们不是定义的函数。

任何帮助将不胜感激。

干杯，

D.

相关讨论

resetZoomButton.destroy() 函数只有在 resetZoomButton 是一个对象时才能被调用。根据 Highsotck 来源：

For Stock charts (...) X axis zooming is already allowed by the Navigator and Range selector.

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

所以，要破解这个，你可以简单地做：

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

这意味着缩放类型仍然是 \\'x\\' 但你省略了这个丑陋的 if 语句，它用一些随机字符串替换了 resetZoomButton 对象...

您必须禁用导航器才能移除底部栏并禁用 rangeSelector 才能移除缩放按钮

1
2
3
4
5
6
7
8
9
10
$('#container').highcharts('StockChart', {
    ...
    rangeSelector : {
        enabled: false
    },
    navigator: {
        enabled: false
    }
    ...
});

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

相关讨论