Flot图表中Y轴标签的放置，JQuery

Question

为什么我的y轴错位了，如何修复？！我无法理解为什么'y'轴在图表上方。有任何想法都欢迎提出。

这些是我使用的选项。我试过抓取生成的y轴类并手动使用CSS将其向左移动几个像素，但整个图形会向左移动。据我所知，在API中没有任何东西可以相对于图形移动y轴刻度标签。

    var options = {
    colors: ["#99CCFF", "#000099", "#FF6C47"],
    series: {
    lines: {show: true, highlightColor:'#000099'},
    points: {show: true}
    },
    xaxis: {
    mode: "time",
    timeformat: "%d/%m",
    markings: [{color: "#000"}],
    },
    yaxis: {
    markings: [{color: "#000"}]
    },
    grid: {
    markings: [{color: "#fff"}],
    labelMargin: 10,
    axisMargin: 10,
    backgroundColor: {
        colors: [ "#000099", "#29A3CC" ]
    },
    borderWidth: {
        top: 1,
        right: 1,
        bottom: 2,
        left: 2
    }
    },
    legend: {
    show: true,
    backgroundOpacity:.5,
    labelBoxBorderColor: 1,
    position: "nw",
    margin: 5
    }
};
$.plot("#bpTable", [
    {label: "systolic", data: c1},
    {label: "diastolic", data: c2}
],
options);

- Joe Austin

---

图片可以让人们了解你的问题，但要帮助你解决问题，你必须提供你源代码的部分并解释你尝试过什么。 - Daniel W.

我猜你正在隐藏的 div 中绘制图形 (<div style=display:none id=bpTable></div>)，你是在手风琴或选项卡之类未附加到 DOM 的元素中调用 plot 吗？请注意，此处不提供解释。 - Deepak Ingole

请参考https://dev59.com/rW035IYBdhLWcg3wbPY5，特别是我在https://github.com/flot/flot/issues/1014上的最后一条评论。 - DNS

Answer 1

正如 @captain 建议的那样，如果你在一个隐藏的占位符（bpTable）上调用 $.plot，那么这就是结果。只需在您的占位符可见之前不要调用 $.plot，或者使用一些技巧将其呈现在屏幕外（例如像这个例子中的做法）。

- Ryley

---

如果我们在选项卡和手风琴中同时绘制图表，是否有什么技巧或诀窍？如果使用选项卡，那很好，但手风琴呢？我想这不是一个干净的解决方案来延迟绘制。 - Deepak Ingole

通常我会延迟 plot 调用，直到实际显示相关选项卡时再进行调用（使用选项卡的 activate 事件）。 - Ryley

Answer 2

如同 @Ryley 已经回答的那样，您必须在显示标签后调用 $.plot。

当使用Bootstrap标签时，您可以附加一个处理程序并在其中调用$.plot：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    if ($(e.target).attr('href') == "#umsatz-tab")
    {
        $.plot("#chart", data, options);
    }
});

更多关于Bootstrap标签页的信息： http://getbootstrap.com/javascript/#tabs-usage （向下滚动到“事件”部分）。

- Thomas