浮动图表：如何添加开始和结束刻度？答案

【问题标题】：Flot charts: how to add a beginning and ending tick?浮动图表：如何添加开始和结束刻度？
【发布时间】：2013-08-31 12:00:35
【问题描述】：

我正在尝试将两条垂直线 (ticks) 添加到我的图表 (Flot) 以更清晰地显示最小值和最大值。我不是指网格边界！

我试图计算距离，新的最小值/最大值。值并通过轴选项tickFormatter、tickSize 等对其进行格式化 - 但我无法完成它。

线条之间的距离必须相等（预览如下）。

是否有任何设置、剪辑或解决方法可以使这成为可能？

随意玩小提琴：http://jsfiddle.net/EK8Fk/1/

$(function () {    
    var data = [
        [10, 10], [-37.5, 20], [30, 30], [40, 40], [83.8, 50]
    ];

    var options = {
        series:{
            bars:{show: true}
        },
        bars:{
            horizontal:true,
            barWidth: 8
        },
        grid:{
            borderWidth: 0
        },
        xaxis: { 
            color: "#FF0000" 
        },
        yaxis: { 
            tickColor: "#FFFFFF",
            ticks: [[10, "A"], [20, "B"], [30, "C"], [40, "D"], [50, "E"]] 
        }
    };

    $.plot($("#flotcontainer"), [data], options);  
});

应该是这样的：

提前非常感谢！

【问题讨论】：

标签： javascript jquery math charts flot

【解决方案1】：

这里是您问题的简单解决方案：

只需定义 x 轴的最小值和最大值，

xaxis: { 
        min:-40.0,
        max:100,
        color: "#FF0000" 
    },

这是你的working fiddle

【讨论】：