javascript - Highcharts : Shared Tooltip for non-matching x values

Question

我想要共享工具提示，其中应显示所有系列数据，但它无法正常工作。我想在单个工具提示中显示所有系列的数据。我正在使用反向真实的 SPLINE 图表。我最多需要在图表中显示 6 个系列的数据。我想要共享工具提示，但我的代码共享工具提示不起作用。 我正在上传我的 Highchart 代码。

 Highcharts.chart('container', {
    chart: {
        inverted: true,

    },
    xAxis: {
        min: 0,
        max: Math.ceil(99.32),
        reversed: false,
        marker: {
            enabled: false
        },

        maxPadding: 0.05,
        showLastLabel: true,
        gridLineWidth: 1,
        tickLength: 0,
        lineColor: 'transparent',
        lineWidth: 1,
    },
    credits: false,
    yAxis: {
        min: 0,
        max: 100,
        marker: {
            enabled: false
        },
        title: {
            text: '',
            enabled: false
        },
        labels: {
            formatter: function() {
                return this.value + '%';
            },

        },
        lineWidth: 2,
        gridLineWidth: 1
    },
    legend: {
        enabled: true,
        floating: false,
    },
            plotOptions: {
        spline: {
            marker: {
                enabled: true,
            }
        },
        tooltip: {
            marker: {
                enabled: true
            }
        }
    },
    tooltip: {
        enabled: true,
        shared: true,
        crosshairs: [false, true],

    },
     series: [{

            name: 'Default',

            data: [
            [99.32, 1],[98.98, 2],[99.09, 3],[99.15, 4],[99.05, 5],[98.75, 6],[98.54, 7],[96.76, 8],[94.31, 9], [92.43, 10],[90.01, 11],[88.29, 12],[86.67, 13],[85.04, 14],[82.76, 15],[81.28, 16],[79.93, 17],[78.32, 18],[76.62, 19],[75.06, 20],[73.35, 21],[72.12, 22],[70.68, 23],[69.35, 24],[68.2, 25],[66.69, 26],[65.61, 27],[64.81, 28],[63.58, 29],[62.6, 30],[61.81, 31],[60.59, 32],[59.64, 33],[58.45, 34],[57.61, 35],[56.51, 36],[55.63, 37],[54.31, 38],[54, 39],[53.3, 40]
            ]}, {

            name: 'Series 1',

            data: [[99.1, 1],[98, 2],[99.2, 3],[99.1, 4],[99.05, 5],[98.55, 6],[98.24, 7],[96.56, 8],[94.11, 9], [92.13, 10],[90.00, 11],[88.09, 12],[86.07, 13],[84.04, 14],[82.15, 15],[81, 16],[79, 17],[78, 18],[76, 19],[75, 20],[73, 21],[72, 22],[70.8, 23],[69.3, 24],[68, 25],[66.9, 26],[65.1, 27],[64.8, 28],[63.8, 29],[62, 30],[61, 31],[60.19, 32],[59.14, 33],[58.15, 34],[57.11, 35],[56.1, 36],[55.3, 37],[54.3, 38],[54, 39],[53, 40]],
            color: "#434348",

        },{

            name: 'Series 2',

            data: [[99.12, 1],[98.18, 2],[99.19, 3],[99.15, 4],[99.05, 5],[98.75, 6],[98.54, 7],[96.76, 8],[94.31, 9], [92.43, 10],[90.01, 11],[88.29, 12],[86.67, 13],[85.74, 14],[82.76, 15],[81.28, 16],[79.93, 17],[78.32, 18],[76.4, 19],[75.06, 20],[73.35, 21],[72.12, 22],[70.68, 23],[69.35, 24],[68.24, 25],[66.61, 26],[64.61, 27],[64.81, 28],[63.58, 29],[62.6, 30],[61.81, 31],[60.59, 32],[59.64, 33],[58.45, 34],[57.61, 35],[56.51, 36],[55.63, 37],[54.31, 38],[54, 39],[53.3, 40]],
            color: "#90ed7d",

        },{

            name: 'Series 3',

            data: [[99.32, 1],[98.98, 2],[99.09, 3],[99.15, 4],[99.05, 5],[98.75, 6],[98.54, 7],[96.76, 8],[94.31, 9], [92.43, 10],[90.01, 11],[88.29, 12],[86.67, 13],[85.04, 14],[82.76, 15],[81.28, 16],[79.93, 17],[78.32, 18],[76.62, 19],[75.06, 20],[73.35, 21],[72.12, 22],[70.68, 23],[69.35, 24],[68.2, 25],[66.69, 26],[65.61, 27],[64.81, 28],[63.58, 29],[62.6, 30],[61.81, 31],[60.59, 32],[59.64, 33],[58.45, 34],[57.61, 35],[56.51, 36],[55.63, 37],[54.31, 38],[54, 39],[53.3, 40]],
            color: "#f7a35c",

        },{

            name: 'Series 4',

            data: [[99.32, 1],[98.98, 2],[99.09, 3],[99.15, 4],[99.05, 5],[98.75, 6],[98.54, 7],[96.76, 8],[94.31, 9], [92.43, 10],[90.01, 11],[88.29, 12],[86.67, 13],[85.04, 14],[82.76, 15],[81.28, 16],[79.93, 17],[78.32, 18],[76.62, 19],[75.06, 20],[73.35, 21],[72.12, 22],[70.68, 23],[69.35, 24],[68.2, 25],[66.69, 26],[65.61, 27],[64.81, 28],[63.58, 29],[62.6, 30],[61.81, 31],[60.59, 32],[59.64, 33],[58.45, 34],[57.61, 35],[56.51, 36],[55.63, 37],[54.31, 38],[54, 39],[53.3, 40]],
            color: "#8085e9",

        },{

            name: 'Series 5',

            data: [[99, 1],[98, 2],[99, 3],[99, 4],[99, 5],[98, 6],[98, 7],[96.76, 8],[94.31, 9], [92.43, 10],[90.01, 11],[88.29, 12],[86.67, 13],[85.04, 14],[82.76, 15],[81.28, 16],[79.93, 17],[78.32, 18],[76.62, 19],[75.06, 20],[73.35, 21],[72.12, 22],[70.68, 23],[69.35, 24],[68.2, 25],[66.69, 26],[65.61, 27],[64.81, 28],[63.58, 29],[62.6, 30],[61.81, 31],[60.59, 32],[59.64, 33],[58.45, 34],[57.61, 35],[56.51, 36],[55.63, 37],[54.31, 38],[54, 39],[53.3, 40]],
            color: "#f15c80",

        },{
            showInLegend: false,
            name: 'Fixed',
            data: [ [23.39,0], [23.39,10] ,[23.93,20], [23.93,30], [23.93,40], [23.93,50], [23.93,60], [23.93,70], [23.93,80], [23.93,90], [23.93,100]]
            }               
    ]
});

我在这里为您提供我的 JSFiddle 链接。 Shared Tool-Tip JSFiddle

Answer 1

您必须对系列的值进行插值。这个想法已经在这里提出:https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/5462529-tooltip-data-interpolation在这里:https://github.com/highcharts/highcharts/issues/647 .下面是一个简单的示例，其中点之间的距离不高于 0.5，显示在一个普通的 tooltip 中。

API 引用:
http://api.highcharts.com/highcharts/tooltip.formatter

例子:
http://jsfiddle.net/hey123fh/