首页 文章

可以改变jqplot工具提示的不透明度吗？

提问于
浏览 次
0

我有一个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更改，尽管我知道这没有任何区别 .

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

谢谢 .

jqplot

5 回答

  • 0

    我用'Anton Danilchenko'告诉，但是在PieChartModel类的Extender方法中，它对我有用 .

    pieModel.setExtender（“function（）{$（' . jqplot-highlighter-tooltip'） . css（{'background'：'＃fabafa'，'padding'：'2px 5px'}）;}”）;

    回复于
  • 0

    尝试编辑

    .jqplot-cursor-tooltip

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

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

    回复于
  • 0

    我修复了 opacity for jqPlot tooltip ：

    $('.jqplot-highlighter-tooltip').css({'background': '#fafafa', 'padding': '2px 5px'});
    回复于
  • 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添加了工具提示

    回复于
  • 0

    使用 CSS 属性：

    opacity:0.4;

    在图像上改变不透明度 . CSS Image Opacity help

    回复于

相关问题