Tickformatter не работает должным образом в последней версии Flot

Question

В нашей предыдущей версии Flot следующая функция tickformatter работала нормально.Он отображал значение и правильно использовал класс.

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

В последней версии (v. 0.7) он отображает теги буквально, поэтому рядом с графиком я вижу что-то вроде <span class='axisLabel'>50%</span>, где ось yгалочки должны быть.Я должен видеть только список процентов.

Я сделал столько отладки, сколько смог, но не выяснил, что является причиной этого.Любые идеи будут оценены.

Answer 1

Это связано с недавним «улучшением» в обработке этикеток, я думаю. От README.md в разрабатываемой версии:

Метки Оси теперь отрисовываются с текстом холста с некоторым анализом поддержка новых строк. Это решает различные проблемы, но также означает, что они больше не поддерживает разметку HTML, доступ к ним можно получить как элементы DOM или стилизован непосредственно с помощью 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>

Это позволило использовать HTML-код в tickFormatter. В последней версии все это исчезло, и ярлыки добавляются на холст напрямую через

ctx.fillText(your_label, x, y);

Нет тегов форматирования HTML, поэтому работать больше. Вещи, которые раньше были простыми, такие как оформление меток или превращение их в ссылки, теперь не так просты. Возможно, разработчики флота могут пролить свет на то, как лучше всего добиться такой же функциональности в новой версии.

Я использую flot в основном для гистограмм. Один (некрасивый) обходной путь, который мне кажется подходящим, - это заменить всю функцию drawAxisLabels в новейшем jquery.flot.js на функцию insertAxisLabels из стабильной версии (после переименования в drawAxisLabels). Кроме того, мне нужно вручную установить labelWidth в параметрах xaxis моих графиков, так как в противном случае ширина графиков рассчитывается неправильно.

Answer 2

function formatter(val, axis) {
    return "<span style='font-weight: bold'>" +  val / 1000000 + "m</span>"; 
}

var usersData = { color: "#00FF55", data: [[1, 900000], [2, 926000], [3, 959000], [4, 1056000], [5, 1242300]] };

$(document).ready(function() {
    $.plot($("#UserGraph"), [usersData], { xaxis: { ticks: [] }, yaxis: { tickFormatter: formatter } });
});

Я могу удалить стиль, и цифры вернутся к обычным не жирным числам.