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

【问题标题】：Highstock graph showing data outside selected rangeHighstock 图表显示所选范围之外的数据
【发布时间】：2017-05-16 22:09:14
【问题描述】：

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

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

Hovering over a point outside of the graph

JSFiddle：http://jsfiddle.net/7dk6g6rh/

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>

【问题讨论】：

不使用最小宽度，只使用宽度。这不仅会缩短图表的宽度，还会缩短导航器的宽度。请查看jsfiddle.net/7dk6g6rh/1
我仍然可以在您的解决方案中看到额外的数据点。导航器的长度不是问题，而是悬停在图表右侧时出现的额外数据点（请参阅原始问题中发布的屏幕截图）。
如果你删除设置极端线，你会得到想要的结果。请查看jsfiddle.net/7dk6g6rh/2
谢谢，但期望的结果是设置极端值（或让用户使用导航器设置它们）并且无法将鼠标悬停在该数据点上:)
此链接可能会帮助您在 highstock 中设置极端值。 api.highcharts.com/highstock/Axis.setExtremes

标签： javascript graph highcharts highstock

【解决方案1】：

我通过extending Highcharts 解决了这个问题，按照我的意愿行事。我封装了 Tooltip、Point 和 Axis 函数（分别为刷新、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>

【讨论】：