图表中的工具提示不能正常工作

Question

我正在使用highchart(line-time-series)，它工作得很好，但正如我在我提供的fiddle链接中所展示的，没有显示工具提示顺利例如如果你中间的绿线和希望看到工具提示线低于即使你点鼠标点在一个较低的线的绿线仍显示工具提示和低线看到工具提示你应该开始光标从一行的开始处,你想看你就能看到工具提示的是痛苦的。下面是我的代码:

$(function () {
            var youDynamicSeries = [];
            var series1 = {
                type: 'area',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: [
                0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258
            ]
            };
            var series2 = {
                type: 'area',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: [
                0.7446, 0.6445, 0.5544, 0.8451, 0.5418, 0.7264, 0.6258, 0.5232, 0.3233, 0.6258
            ]
            };
            var series3 = {
                type: 'area',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: [
                0.9446, 0.8445, 0.9544, 0.9451, 0.9418, 0.9264, 0.8258, 0.8232, 0.8233, 0.9258
            ]
            };
            youDynamicSeries.push(series1);
            youDynamicSeries.push(series2);
            youDynamicSeries.push(series3);
            $('#container').highcharts({
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: 'USD to EUR exchange rate from 2006 through 2008'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime',
                    minRange: 14 * 24 * 3600000 // fourteen days
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: youDynamicSeries
            });
        });

小提琴链接:

小提琴我希望我能传达我的意思。有人能帮忙吗?

Answer 1

这与序列的添加顺序有关。zIndex决定了哪个系列项目得到悬停。这个zIndex是根据序列相对于series对象数组中其他序列的位置自动计算出来的。请参阅下面的演示链接，我在其中启用了legend—如果您关闭系列，您会注意到添加的最后一个系列位于其他两个系列的"顶部"。虽然一般的线形图/条形图可以让你将鼠标悬停在zIndex中"低于"另一个点的点上，但面积图却不能(我认为这将是一个bug)。要解决这个问题，有两种可能的方法:

1. 您根据最大值将zIndex分配给您的系列是底部(最低zIndex)和最小值系列为最高(最高zIndex)。问题是，你必须预先计算你的指标是"大"还是"小"系列，也不能保证工作，如果一个点是
2. 另一个选择是将tooltip视为shared。这意味着如果数据点共享相同的xAxis值，那么它们可以显示在一个tooltip，当你悬停在任何一个点。我认为这是推荐的选项。

Live demo option 2