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

问题描述

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

我正在尝试使用 Highcharts 为 4 个系列渲染具有 2500 多个数据点的双轴图表。我还使用共享工具提示选项来呈现我的自定义工具提示 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 日”数据点的工具提示。

标签： highchartsreact-highcharts

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

chart: {
    width: 1000
},

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

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

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

问题描述

解决方案

推荐阅读