显示所选范围外数据的 Highstock 图表

Question

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

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

Hovering over a point outside of the graph

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>

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>

显示所选范围外数据的 Highstock 图表

Highstock graph showing data outside selected range

javascript

graph

highcharts

highstock