打印图表时避免使用工具提示

Question

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

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

Answer 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
            }
        }
    }
}

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