Highcharts：当具有相同 X 轴值的多列时，如何获得每列 1 个工具提示？

Question

我正在使用 highcharts (StockChart) 绘制事件时间线（因此 X 轴代表日期时间）并且我的 JS 知识非常基础。每个事件（表示为 bar/column）都附加了一些数据，我在工具提示中显示了这些数据。我的时间轴有多种类型的事件（=系列），并且可能会同时发生 2 个或更多不同类型的事件。所以换句话说，绘图系列中的 2 个点共享相同的 X 轴值。

我的问题是，在这些情况下，我最终得到一个时间线，它有 2 列，但只有 1 个工具提示包含 2 条数据的合并。

这是现在的样子： hover any column

1.7xxxx表示第一列值
3.xxx表示第二列值

还要注意：“捕捉”点大致位于 2 列的中间（细长的白色垂直条）而不是列本身，从用户体验的角度来看这有点奇怪。

我想要的 是将它们分开，以便每一列都有自己的工具提示，就像常规场景一样浮动在列上。

我希望它看起来像什么（草图）：

hover left column
hover right column

以下是我处理图表的方式：

return function (yaxisTitle, targetId, dataHighStock) {
        // Line timeline chart
        // create the chart

        var config = {
            chart: {
                renderTo: targetId,
                height: 269,
                type: 'column'
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    pointRange: 1,
                    pointPlacement: "on",
                    pointWidth: 10
                }
            },
            xAxis: {
                type: 'datetime',
                ordinal: false,
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m-%d',
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%e. %b',
                    week: '%e. %b',
                    month: '%b \'%y',
                    year: '%Y'
                },
                minPadding: 0.05,
                maxPadding: 0.05
                
            },
            yAxis: {
                offset: 30,
                min: 0,
                title: {
                    text: yaxisTitle
                },
                labels: {
                    enabled: true
                }
            },
            rangeSelector: {
                inputDateFormat: '%Y-%m-%d',
                inputBoxStyle: {
                    left: '270px',
                    width: '250px'
                },
                selected: 5
            },
            tooltip: {

                formatter: function () {
                    var s = '';
                    var examDate = new Date(this.x);
                    var month = examDate.getMonth() + 1;
                    var day = examDate.getDate();
                    s = examDate.getFullYear() + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day) + "<br />";
                    $.each(this.points, function (i, point) {
                        s += point.y+"<br>";
                    });
                    return s;
                },
                snap: 1
            },
            legend: {
                y: 20,
                x: 80,
                enabled: true,
                align: 'left',
                layout: 'horizontal',
                verticalAlign: 'top',
                shadow: true
            },
            series: dataHighStock
        };

        //add series to navigator
        new Highcharts.StockChart(config, function (loadedChart) {
            for (var i = 0; i < dataHighStock.length; i++) {
                loadedChart.addSeries($.extend({}, dataHighStock[i],
                    {
                        enableMouseTracking: false,
                        type: "spline",
                        xAxis: loadedChart.xAxis.length - 1,
                        yAxis: loadedChart.yAxis.length - 1,
                        color: loadedChart.options.colors[i],
                        showInLegend: false
                    }));
            }
        });
    };

“dataHighStock”只是一个普通的 json 我通过了，它看起来像这样：

[ { type: "column", name: "Event Type 1", color: "#08A5E1", data: [ { x: 1431430804000, y: 1.7153846153846155, name: '1' }] }, { type: "column", name: "Event Type 2", color: "#772971", data: [ { x: 1431430804000, y: 3.63636, name: '14915'}] },  ]

当我将 Highcharts 创建更改为通过 Highcharts.chart(...) 而不是 Highcharts.StockChart(...) 并删除 for 循环时，我可以使工具提示“有点”工作（= 每列 1 个工具提示）导航器 + 删除工具提示格式化程序中显示的特定数据 ($.each(this.points, ......){...})。缺点是我失去了 StockChart 的所有功能（时间范围、导航器等），显然，还有工具提示内容。

这是一个 jfiddle link 重现了所有这些：https://jsfiddle.net/eq3mz7y1/20/

Answer 1

将 tooltip.split 更改为 false 可以解决您的问题。请注意，此解决方案需要对格式化程序回调输出进行一些更改，因为 this.points 数组不再存在。

演示：https://jsfiddle.net/BlackLabel/01sqhdyv/

API: https://api.highcharts.com/highcharts/tooltip.split

Highcharts：当具有相同 X 轴值的多列时，如何获得每列 1 个工具提示？

Highcharts: when having multiple columns for the same X axis value, how can I get 1 tooltip per column?

highcharts