Question

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

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

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

是否有任何设置，剪切或解决方法可以实现此目的？

$(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);  
});

它应该是这样的：

enter image description here

提前多多感谢！

Answer 1

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

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

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

这是您的working fiddle

Flot chart：如何添加开始和结束标记？

1 个答案: