Question

我正在使用http://www.flotcharts.org/。为什么我的网格线会消失？

flot without grid lines

以下是我的情节选项的代码：

var options = {
        grid: {
            markings: EVS,
            clickable: true,
            hoverable: true
        },
        series: {
            lines: {
                show: true,
                fill: true,
                lineWidth: 1,
                fillColor: {
                    colors: [{
                        opacity: 1
                    }, {
                        opacity: 1
                    }]
                }
            }
        },
        colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)", "rgba(255, 255, 255, 1)"],
        crosshair: {
            mode: "xy",
            color: "#323232",
            lineWidth: 1
        },
        xaxis: {
            mode: mode,
            show: true,
            position: "bottom",
            color: "#323232",
            font: {
                size: 10,
                lineHeight: 15
            },
            labelHeight: 15,
            tickLength: 5
        },
        yaxis: {
            show: true,
            position: "left",
            color: "#323232",
            labelWidth: 20,
            font: {
                size: 10
            },
            max: vmax + 20,
            min: 0,
            minTickSize: 1,
            tickSize:20,
            tickLength: 10
        },
        pan: {
            interactive: true,
            cursor: "move",
            frameRate: 60
        },
        tooltip: true,
        tooltipOpts: {
            id: 'flotTip', //"flotTip"
            content: '%x : %y km/h', //"%s | X: %x | Y: %y"
            shifts: {
                x: 10, //10
                y: 20 //20
            },
            defaultTheme: true, //true
            lines: {
                track: true, //false
                threshold: 0.01 //0.05
            },
            onHover: function (flotItem, $tooltipEl) {
                if (flotItem.seriesIndex == 1) $tooltipEl[0].innerHTML = "Postój";
            }
        }
    };

我只想要简单的yaxis线。

PS。十字准线来自十字准线插件。

Answer 1

如果您想要在刻度线处设置行，请不要设置tickLength选项。 Flot本身没有“网格线”，但是可以穿过网格的刻度线。如果您只想在一个轴上使用它们，请在一个轴上设置选项，而在另一个轴上设置选项。

来自documentation（强调我的）：

“tickLength”是刻度线的长度（以像素为单位）。 默认情况下，最内侧的轴将具有在整个绘图中延伸的刻度，而任何额外的轴都使用小刻度。值为null表示使用默认值，而数字表示该长度的小刻度 - 将其设置为0以完全隐藏线。

jQuery Flotcharts - 显示网格线？

1 个答案: