Question

我有一个Highstock图的实现，其中图表的宽度变窄，以便并排放置其中的两个。这样做的结果似乎是从左图到右边的一些数据流失。即使只有一个宽度变窄的图表，它似乎仍然会发生。

除非将鼠标悬停在数据上，否则无法看到流出的数据。尽管在导航器中超出了所选范围，但晕圈和工具提示仍会显示在数据点上。

Hovering over a point outside of the graph

＆＃13;

var stockChart = Highcharts.stockChart('container', {
    xAxis: {    
        width: '500',
        type: 'datetime'
    },
		series: [{
        data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8],
        pointStart: Date.UTC(2004, 3, 1),
        pointInterval: 3600 * 1000
    }]
});

stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);

＆＃13;

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

＆＃13;

Answer 1

我通过extending Highcharts解决了这个问题，以表达我想要的方式。我包装了Tooltip，Point和Axis函数（分别是refresh，setState和drawCrosshair），以便在继续正常操作之前进行一些检查。

这是具有正确行为的JSFiddle：http://jsfiddle.net/7dk6g6rh/7/

(function (H) {
    H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
        for(var i=0; i<points.length; i++) {
            if(!points[i].isInside) {
                this.hide();
                return;
            }
        }
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
    H.wrap(H.Point.prototype, 'setState', function(proceed, state) {
        if(this.isInside || state !== 'hover') {
            proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        }
    });
    H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) {
        var hoverPoint = this.chart.hoverPoint; 
        if(hoverPoint && hoverPoint.isInside) {
            proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        } else {
            this.hideCrosshair();
        }
    });
}(Highcharts));

var stockChart = Highcharts.stockChart('container', {
    xAxis: {    
        width: '500',
        type: 'datetime'
    },
    series: [{
        data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8],
        pointStart: Date.UTC(2004, 3, 1),
        pointInterval: 3600 * 1000
    }]
});

stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

显示所选范围之外数据的高价图表

1 个答案: