Question

我正在使用高图（线时间序列）并且它工作正常但是正如我在小提琴链接中所展示的那样，工具提示没有顺利显示，例如，如果你在绿线的中间并且想要看到下面一行的工具提示，即使你将光标指向下面一行的点仍然显示绿线的工具提示，并且为了看到下面一行的工具提示，你应该从你的行的开头开始光标我希望看到你能看到痛苦的工具提示。这就是我的代码：

$(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
            });
        });

小提琴链接：

fiddle

我希望我可以传达我的意思。任何人都可以帮忙吗？（我提前感谢任何帮助）

Answer 1

这与添加系列的顺序有关。 zIndex指示哪个系列项目悬停。此zIndex由系列与series对象数组中的其他系列相关的位置自动计算。请参阅下面的演示链接，其中我已启用legend - 如果您关闭系列，您会注意到添加的最后一个系列位于其他两个系列的“顶部”。虽然一般线条/条形图可以让你将鼠标悬停在zIndex中另一个点“下方”的点上，但区域图表不会（我认为这是一个错误）。要解决这个问题，有两种可能的方法：

您根据最大值将zIndex指定给系列作为底部（最低zIndex）和您最小的重要系列是最高的（最高zIndex）。这个问题就是你必须预先计算“大”或“小”的指标系列，如果有一点，它也不能保证工作高于/低于另一个系列的点。
另一种选择是将tooltip视为shared。这意味着如果数据点共享相同的xAxis值当您将鼠标悬停在任何一个上时，它们可以显示在一个tooltip中点。这是我认为的推荐选项。

选项2的实时demo

highcharts中的工具提示无法正常工作

1 个答案: