可以更改 jqplot 工具提示的不透明度吗？答案

【问题标题】：Can the opacity of a jqplot tooltip be altered?可以更改 jqplot 工具提示的不透明度吗？
【发布时间】：2017-05-24 22:16:11
【问题描述】：

我有一个 jqplot 条形图，我已经为它实现了 tooltipContentHandler 来显示图像而不是文本。这是代码...

tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
    var currentItem = myData[0][pointIndex];
    var pid = currentItem[0];
    // Get the image url from static list...
    var pidImage = pidImages[pid];

    var s = "<img src='" +pidImage+ "' width=50px height=50px/>";
    return s;
 }

效果很好 - 当鼠标移到条上时会显示图像。我的问题是图像的不透明度 - 因为图像的一部分覆盖了条，而另一部分没有，所以图像的不透明度看起来很奇怪。

所以我只是通过将其添加到 tooltipContentHandler 函数来更改不透明度...

$('.jqplot-highlighter-tooltip').css("background", "rgba(208,208,208,1.0)");

没有区别，所以我直接在 jqplot css 中进行了更改（包括“.min”版本）：

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
    /*replace this
      background: rgba(208,208,208,0.5);
     with...*/
    background: rgba(208,208,208,1.0);
}

但仍然存在相同的不透明度问题。然后我尝试在 css 中对 .jqplot-cursor-tooltip 进行相同的 rgba 更改，尽管我知道这不会有任何区别。

有人对我如何解决这个问题有任何好的想法吗？

谢谢。

【问题讨论】：

您可以为您的图表覆盖工具提示 div 的 CSS 属性。在那里你可以指定你的不透明度
@Gyandeep 这不正是我在上面所做的吗？

标签： jqplot

【解决方案1】：

我最初认为这也是一个不透明度问题，但它也是一个 z-index 问题。所以在我的情况下，我用 CSS 解决了它：

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
    z-index: 2;
    background: rgba(208,208,208,1)!IMPORTANT;
}

点标签的 z-index: 2，但工具提示将以相同的 z-index 结束，因为随后使用 JavaScript 添加了工具提示

【讨论】：

【解决方案2】：

使用CSS 属性：

opacity:0.4;

在图像上更改不透明度。 CSS Image Opacity help

【讨论】：

感谢您的回复。我已经尝试过了，虽然不透明度为 1.0：var s = "<img src='" +pidImage+ "' width=50px height=50px style='opacity:1.0'/>";，但没有任何区别。
你用的是哪个浏览器？
Chrome (31.0.1650.57)

【解决方案3】：

尝试编辑

.jqplot-cursor-tooltip

类而不是荧光笔或覆盖它（在规则末尾使用“！important”）

这里可以找到css规则列表：http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

【讨论】：

【解决方案4】：

我修复了 jqPlot 工具提示的不透明度：

$('.jqplot-highlighter-tooltip').css({'background': '#fafafa', 'padding': '2px 5px'});

【讨论】：

【解决方案5】：

我按照“Anton Danilchenko”所说的那样使用，但是在 PieChartModel 类的 Extender 方法中，它对我有用。

pieModel.setExtender(" function(){ $('.jqplot-highlighter-tooltip').css({'background': '#fafafa', 'padding': '2px 5px'}); } ") ;

【讨论】：