Flot中的x轴标签

Question

我要做的就是标记我的 x -axis：

function doPlot(position) {//Flot
  $.plot("#placeholder", [//data
    {
      data: theta_plot,
      label: "Angle (rad)",
      yaxis: 1,
      color: "red"
    },
    {
      data: omega_plot,
      label: "Angular Velocity (rad/sec)",
      yaxis: 2,
      color: "green"
    },
    {
      data: e_plot,
      label: "Energy (J)",
      yaxis: 3,
      color: "blue"
    }
  ],//options
    {
      xaxis: {
        axisLabel: "Time (sec)",
        axisLabelUseCanvas: true
      },
      yaxes: [
        { font: { color: "red" } },
        { font: { color: "green" } },
        { font: { color: "blue" } },
        { alignTicksWithAxis: position === "left" ? 1 : null }
      ],
      legend: {
        position: "nw",
        labelBoxBorderColor: null
      }
    }
    );
}
doPlot("left");

我不明白为什么这不起作用。这应该是一个明智的选择。我能想到的只是this，已经两岁了。即使现在我还需要jquery.flot.axislabels.js库吗？

这是有关情节的current draft。有什么想法吗？

Answer 1

  

我现在还需要jquery.flot.axislabels.js库吗？

是

简单，标准Flot没有插件的轴标签功能。

Answer 2

如果您不想使用该插件，可以在使用一些jquery渲染绘图后自己添加标签：

// create label div
var label = $('<div>Four Score and Seven Years Ago</div>'); 
// intial positioning
label.css({'position': 'absolute', 'left': $('.flot-x-axis').width()/2 + $('.flot-x-axis .tickLabel:first').position()['left']/2, 'top': $('.flot-x-axis').height() + 5});
// append to plot
$('#placeholder').append(label); 
// final position adjustment (label won't have width till appended)
label.css('left', label.position()['left'] - label.width() / 2);

在你的情节上，结果是：