打印图表时避免工具提示答案

【问题标题】：Avoid tooltips when printing a chart打印图表时避免工具提示
【发布时间】：2015-12-17 00:59:15
【问题描述】：

我有一个图表，当我使用右上角的打印按钮打印图表时，有时会出现该系列的工具提示也会显示在打印图表中的情况：

这意味着当我将鼠标指向打印按钮并且我的系列也在它附近绘制时，将显示该系列的工具提示，当我打印图表时，也会打印此工具提示，我该如何避免它？

【问题讨论】：

【解决方案1】：

您可以使用 CSS 隐藏工具提示。为此，请创建一些特定于打印的样式：@media print 中定义的任何样式都只会在页面打印时应用。

@media print {
    ...
}

在您的情况下，您想隐藏 Highcharts 中的工具提示是 g，类为 highcharts-tooltip。因此，您需要将其添加到您的 CSS 中，然后它不会打印工具提示，即使它在您请求打印页面时可见：

@media print {
    .highcharts-tooltip { display:none; }
}

然后，当您打印时，工具提示将不可见，如您在此屏幕截图中所见：

请注意，虽然工具提示不再可见，但我在执行 Ctrl + P 时鼠标悬停的点仍然突出显示。解决这个问题可能会比较棘手。

来自Mark's solution，您可以在 Highcharts 中添加：

plotOptions: {
    series: {
        states: {
            hover: {
                enabled: false
            }
        }
    }
}

为了避免突出显示该点...但问题是即使您不打印它也不会突出显示，因此您可能不想添加第二部分。

【讨论】：