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

Question

我已经使用jQuery Flot创建了浮动图表，但现在，我在x轴上有长标签，并且在字符串末尾被...截断了。

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

我已经附上了屏幕截图。

还是可以自定义呈现轴标签（HTML）的方法？

谢谢

Answer 1

已回答的类似问题： 标记为问题

这是尝试使用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将HTML字符串注入float-x＃-label容器中。