如何使用jQuery Flot将工具提示添加到轴标签

Question

我用jQuery Flot创建了flot chart但是现在，我在x轴上有很长的标签，并且在字符串的末尾用...截断了。

我需要在x轴标签上添加工具提示以查看完整标签。

我已附上截图。

或者有没有办法自定义渲染轴标签（HTML）？

由于

Answer 1

类似的问题已经回答：Mark 在Question

这是尝试使用您的CSS并进行一些即时调整，以便适合：

// push the labels down half their width
// while we are at it find longest label height
var longest = -1;
$('#flot_chart .xAxis .tickLabel').each(function(){
   var self = $(this);
   var width = self.width();
   self.css('top',parseInt(self.css('top')) + width/2 - 5);
    if (width > longest){
        longest = width;
    }
});

// now adjust the chart height so we don't overflow
$("#flot_chart").height($("#flot_chart").height() + longest - $('#flot_chart .xAxis .tickLabel').height() + 5);

JSFiddle

Answer 2

我通过在ticks选项中传递HTML字符串来修复此添加。

JQuery Flot在float-x＃-label容器中注入HTML字符串。