javascript - 流程图 : how to add a beginning and ending tick?

Question

我正在尝试向我的图表(Flot)添加两条垂直线(刻度)，以更清晰地显示最小值和最大值。我不是指网格边框!

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

线之间的距离必须相等(预览如下)。

是否有任何设置、片段或解决方法可以实现此目的？

随意弹奏 fiddle :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);  
});

它应该是这样的:

提前非常感谢!

Answer 1

以下是您问题的简单解决方案:

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

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

这是您的working fiddle