Question

考虑Highstocks async data loading example。我想隐藏预览并只显示滚动条。因此，我在图表配置中将enabled设置为false：

navigator: {
    enabled: false,
    adaptToUpdatedData: false,
    ...

这将导致adaptToUpdatedData选项无法按照描述工作，即，当缩放滚动条的宽度始终为100％时。隐藏预览时是否可以保持演示的相同行为？

Answer 1

您可以直观地隐藏导航器的所有元素，而不是禁用它。

例如（JSFiddle）：

$('#container').highcharts('StockChart', {
    navigator : {
        adaptToUpdatedData: false,
        height: 0,
        handles: {
            backgroundColor: 'transparent',
            borderColor: 'transparent'
        },
        series : {
            data : data
        },
        xAxis: {
            labels: {
                enabled: false
            }
        }
    }
    // ...
});

您可能会注意到光标仍会在句柄所在的位置发生变化。如果你想摆脱这个，你可以防止把手一起画。

例如（JSFiddle）：

(function (H) {
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
    });
}(Highcharts));

$('#container').highcharts('StockChart', {
    navigator : {
        adaptToUpdatedData: false,
        height: 0,
        series : {
            data : data
        },
        xAxis: {
            labels: {
                enabled: false
            }
        }
    }
    // ...
});

Highstocks如何使用隐藏导航器与异步加载

1 个答案: