jQuery Flotcharts - 显示网格线？答案

【问题标题】：jQuery Flotcharts - show grid lines?jQuery Flotcharts - 显示网格线？
【发布时间】：2015-07-08 09:31:10
【问题描述】：

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

这是我的绘图选项的代码：

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。十字准线来自十字准线插件。

【问题讨论】：

标签： javascript jquery html charts flot

【解决方案1】：

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

来自documentation（强调我的）：

“tickLength”是刻度线的长度，以像素为单位。 默认情况下，最内层的坐标轴将带有贯穿整个绘图的刻度，而任何额外的坐标轴都使用小刻度。 null 值表示使用默认值，而数字表示该长度的小刻度 - 将其设置为 0 以完全隐藏行。

【讨论】：