jquery-plugins – Tickformatter在最新版本的Flot中没有按预期执行

在我们之前的Flot版本中,以下tickformatter函数运行正常.它显示了值并正确使用了类.

yaxis: {
     tickFormatter: function(v, axis) {
        return "<span class='axisLabel'>" + v + "%</span>";
     }

在最新版本(v.7.)中,它在字面上呈现标签,因此在图表旁边看到类似的东西
    < span class ='axisLabel'> 50％< / span>
y轴刻度标签应该在哪里.我应该只看到一个百分比列表.

我做了尽可能多的调试,但没有发现导致这种情况的原因.任何想法,将不胜感激.

我认为这是由于最近标签处理的“改进”.来自开发版本中的README.md：

Axis labels are now drawn with canvas text with some parsing to
support newlines. This solves various issues but also means that they
no longer support HTML markup, can be accessed as DOM elements or
styled directly with CSS.

更具体地说,似乎是这样

function insertAxisLabels() {...}

被…取代

function drawAxisLabels(){...}

在某一点.前者用于将轴标签放置为一堆< div>.要素如下：

<div class="tickLabels" style="font-size:smaller">
  <div class="xAxis x1Axis" style="color:#545454">
    <div class="tickLabel" style="position:absolute;text-align:center;left:-14px;top:284px;width:75px"><em>0</em></div>
    [... div elements for other labels...]  
  </div>
</div>

这允许我们在tickFormatter中使用html代码.在最新版本中,所有这些都消失了,标签直接通过添加到画布

ctx.fillText(your_label, x, y);

因此,没有HTML格式标签可以工作.过去很简单的事情,比如勾选标签或将它们变成链接,现在变得不那么简单了.也许flot开发人员可以了解在新版本中实现相同功能的最佳方法是什么.

我主要使用flot作为条形图.似乎对我有用的一个(丑陋)解决方法是通过insertAxisLabels函数从稳定版本(在将其重命名为drawAxisLabels之后)替换最新jquery.flot.js中的整个drawAxisLabels函数.我还必须在我的绘图的xaxis选项中手动设置labelWidth,否则绘图的宽度计算不正确.