Highcharts 跳过大型数据集的共享工具提示点

Posted 2023-04-14

【中文标题】Highcharts 跳过大型数据集的共享工具提示点

【英文标题】：Highcharts skipping shared tooltip points for large data sets

【发布时间】：2019-01-14 22:56:04

【问题描述】：

似乎 Highcharts 正在为大量数据点（2500+）跳过共享工具提示中的一些数据点。

我正在尝试使用 Highcharts 为 4 个系列渲染具有 2500 多个数据点的双轴图表。我还使用 shared tooltip 选项来呈现我的自定义工具提示 html。但有时 Highcharts 会在工具提示中跳过 1 或 2 个数据点。例如，当我从左到右慢慢将鼠标悬停在每个点上时，我应该在“3 月 31 日”之后看到“4 月 1 日”。但相反，我看到的是“4 月 2 日”。它是一个错误吗？还是我错过了什么？ （我已验证所有日期都存在于传递给 Highcharts 的类别中。）

tooltip: 
    borderColor: '#ccc',
    backgroundColor: 'transparent',
    borderWidth: 0,
    shadow: false,
    shared: true, //show all series values together
    useHTML: true,
    // hideDelay: 50000,
    formatter: function() 
        if (props.config.type == 'pie') 
            return 'Value : ' + this.y;
         else 
            let html = '<div class="fixed-tooltip">';
            html += formatTooltipDate(this.x);
            if (this.points &&
                this.points.length > 1 &&
                props.config.type != "combination")  //multiple series*(see note below)
                //*combination series are having 1 point, so handled in the else section as single series.
                let dateIndex = props.config.data.categories.indexOf(this.x);
                console.log(" date ", this.x);
                console.log(" dateIndex ", dateIndex);
                if (props.config.type == "dual") 
                    let dualAxisTitles = props.config.dualAxisTitles;
                    html += formatDualSeriesTooltipData(this.x, dateIndex, this.points, dualAxisTitles);
                 else 
                    html += formatMultiSeriesTooltipData(this.x, dateIndex, this.points);
                
             else  //single series
                //for combination charts have a custom tooltip logic
                if (props.config.type == "combination") 
                    let dateIndex = props.config.data.categories.indexOf(this.x);
                    html += formatMultiSeriesTooltipData(this.x, dateIndex, props.config.data.series);
                 else 
                    let seriesColor = this.points[0].point.series.color;
                    let seriesName = this.points[0].point.series.name;
                    let value = this.points[0].y;
                    html += formatSingleSeriesTooltipData(value);
                

            
            html += '</div>';
            return html;
        
    

预计会在“3 月 31 日”之后看到“4 月 1 日”数据点的工具提示。而是看到“4 月 2 日”数据点的工具提示。

【问题讨论】：

嗨，Wenger，你能给我们提供一些最简单的例子吗？在您描述的情况下，一切似乎都运行良好：jsfiddle.net/BlackLabel/omk4180p

嗨 ppotaczek，在您提供的那个 jsfiddle 链接中，当我从“Jan 19, 20.52.29.723”悬停到右侧时，工具提示中的下一点不应该是：“Jan 19, 21.52 .29.723" ?我总是收到“Jan 19, 22.52.29.723”。你看到同样的行为吗？ （或者，这是预期的吗？）

温格，这取决于图表的宽度。如果没有足够的空间放置点（1 像素代表 1 点），它们可能会重叠 - 我认为这是预期的行为。

知道了！谢谢。一旦我开始放大，它就会显示所有点。

【参考方案1】：

如果绘图区域中没有足够的空间放置这些点（1 像素为 1 点），则跳过这些点。解决方法是设置足够的图表宽度：

chart: 
    width: 1000
,

现场演示：http://jsfiddle.net/BlackLabel/yjk0ta43/

API：https://api.highcharts.com/highstock/chart.width

【讨论】：

感谢您的回答。 +1