2

我正在尝试在我的图表（Flot）中添加两条垂直线（刻度线） ，以更清晰地显示最小值和最大值。我不是指网格边界！

我试图计算距离，新的最小值/最大值。值并通过 axis-options 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);  
});

它应该是这样的：

在此处输入图像描述

提前非常感谢！

4

1 回答 1

3

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

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

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

这是你的工作小提琴

于 2013-08-31T04:00:35.767 回答