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

时间:2019-01-14 22:56:05

标签: highcharts react-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日”数据点的工具提示。

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

如果绘图区域中没有足够的空间可以跳过这些点(1点代表1点)。解决方案是设置适当的图表宽度:

chart: {
    width: 1000
},

实时演示:http://jsfiddle.net/BlackLabel/yjk0ta43/

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