如何在angularjs中自定义Flot工具提示？

Question

有没有一种方法可以改变浮点工具提示的外观，例如下面的图像（主要是带有向下箭头的形状）？

以下是我目前如何获得工具提示的方法。

我的工具提示功能

var translateDateTooltip = function(value) {
    if (value == null || value == undefined)
        return value;
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " "+myDate.getFullYear();
}

var toolTipContent = function(label, x, y, z) {
    // format the content of tooltip
    // "%s | Date: %x | Count: %y"
    var str = "";
    if (label == "Volume") {
        str = label+" | Date: "+translateDateTooltip(parseInt(x))+" | Volume Count: "+y;
    } else
        str = label+" | Date: "+translateDateTooltip(parseInt(x))+" | Count: "+y;
    return str;
};

Answer 1

正如我在评论中说的那样，此级别的自定义在工具提示插件中不可用，因此请自行编写代码。 您甚至根本不需要引导程序。

用于“箭头” 工具提示的 CSS。

.tooltip {
      display: none;
      position: absolute;
      width: 100px;
      height: 20px;
      line-height: 20px;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      color: rgb(113, 157, 171);
      background: rgb(255, 255, 255);
      border: 4px solid rgb(255, 255, 255);
      border-radius: 5px;
      text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
      box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
}

.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #FFFFFF transparent transparent transparent;
      top: 44px;
      left: 50px;
}

并添加一个plothover事件：

plotArea.bind("plothover", function(event, pos, item) {
    var tip = $('.tooltip');
    if (item) {
      var offset = plot.getPlotOffset();
      var axis = plot.getAxes();
      var yValue = item.datapoint[1];
      var xValue = item.datapoint[0];
      tip.css('left', axis.xaxis.p2c(xValue));
      tip.css('top', axis.yaxis.p2c(yValue) + 20);
      tip.html(yValue.toFixed(0) + ' tasks used');
      tip.show();
    } else {
      tip.hide();
    }
  });

这里的示例，从您之前的问题继续。