6

在下面的HighCharts示例中，系列A和B具有相同的数据。图表绘图区域中只有 for 的线B可见，因为它直接绘制在A.

最终用户不可能知道A背后是B.

我们可以tooltip.shared = true在配置对象中设置以在悬停在任何系列上时显示给定 x 轴点的所有数据值。但是，在我的真实示例中，我在图表上绘制了多达 50 个系列，这是不合适的。

是否可以保留 的行为tooltip.shared = false，但是当用户将鼠标悬停在与一个或多个系列重叠的系列上时，以在工具提示中显示所有（且仅）重叠系列值？或者是否有任何其他用户友好的方式来表明在给定的 x 值处有 2+ 个相同的 y 值？

http://jsfiddle.net/adamtsiopani/XbYZz/

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            valueSuffix: '°C'
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

http://jsfiddle.net/adamtsiopani/XbYZz/

4

3 回答 3

6

Highcharts 还没有解决方案。它们具有隐藏一个系列的功能，以便其他系列可见，这是一个不错的选择。但是，如果您需要在 2 系列重叠时获得共享工具提示，则可以如下面的小提琴所示完成。

$(function () {
    var series1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

    var series2 = [24.9, 50.5, 106.4, 90.2, 80.0, 150.0, 160.6, 170.5, 160.4, 180.1, 95.6, 54.4];

    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            formatter: function () {
                var s1 = this.series.chart.series[0].processedYData[this.point.index];
                var s2 = this.series.chart.series[1].processedYData[this.point.index];
                if (s1 == s2) {
                    return '<b>' + this.series.chart.series[0].name + ' :' + s1 + '</b><br/><b>' + this.series.chart.series[1].name + ' :' + s2 + '</b><br/>in month : ' + this.x;
                }
                return '<b>' + this.series.name + ' :' + this.y + '</b><br/>in month : ' + this.x;
            }
        },
        series: [{
            data: series1
        }, {
            data: series2
        }]
    });
});

http://jsfiddle.net/Malinga/2jbdqe6x/7/

参考： http: //www.malinga.me/highcharts-shared-tooltips-only-in-overlapping-points/#more-109

于 2015-01-16T17:46:25.867 回答
1

除非精心设计了解决方法，否则 highcharts 还不支持这一点。请参阅此帖子（其中有一个自称是 highcharts 工程师的用户的评论）：

是一种在点彼此重叠（或非常接近）时查看工具提示中所有数据的方法，但当一个点远离其他点时仅查看一个数据

我想您只需要依靠使用图例的用户来取消选择阻止另一个系列的系列。

于 2013-09-24T20:33:41.320 回答
0

作为用户，我会在图表上看到 50 个系列感到困惑——这可读吗？好主意是使用单独的 yAxis 或单独的窗格，但仍然是 50 系列..

但是，您可以采取一些解决方法。不要使用共享工具提示，而是在工具提示格式化程序中，获取实际的 x-index（例如var xIndex = series.xData.indexOf(this.x);）然后遍历所有系列，从系列数据中获取值（例如var yValue = series.yData[xIndex];）。现在比较，this.y如果值相似，则向返回的工具提示添加更多点。

于 2013-09-25T10:38:13.673 回答