如何使jQuery Flot x轴旋转标签直接显示在它们所表示的线条的正下方？

// 引入jQuery和Flot库
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

// 创建一个包含图表的容器
<div id="chartContainer" style="width: 600px; height: 400px;"></div>

// JavaScript代码
<script>
$(document).ready(function() {
  // 数据
  var data = [
    [0, 10],
    [1, 20],
    [2, 30],
    [3, 40],
    [4, 50]
  ];

  // Flot的options
  var options = {
    xaxis: {
      tickFormatter: function(value, axis) {
        // 自定义tickFormatter函数
        var label = "标签" + value; // 替换为实际的标签内容
        var rotation = -45; // 旋转角度，负数表示逆时针旋转
        var position = axis.p2c(value) + axis.box.left; // 标签的位置，根据value计算

        // 使用CSS样式旋转标签并设置位置
        return '<div style="transform: rotate(' + rotation + 'deg); position: absolute; left: ' + position + 'px;">' + label + '</div>';
      }
    }
  };

  // 绘制图表
  $.plot("#chartContainer", [data], options);
});
</script>