javascript - jQuery Flotcharts - 显示网格线?

标签 javascript jquery html charts flot

我正在使用 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 线。

附言。十字准线来自十字准线插件。

最佳答案

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

来自documentation (强调我的):

"tickLength" is the length of the tick lines in pixels. By default, the innermost axes will have ticks that extend all across the plot, while any extra axes use small ticks. A value of null means use the default, while a number means small ticks of that length - set it to 0 to hide the lines completely.

关于javascript - jQuery Flotcharts - 显示网格线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31288701/

相关文章:

javascript - POST数据动态选择不发送

javascript - Javascript 中同步函数内的异步函数

javascript - 添加时在一行中的两列中显示两个表

jquery - AJAX Post 到 ASP.NET MVC 6 Controller 操作方法和参数为 null

jquery - 未捕获的 TypeError : $(. ..).tagsinput 不是函数

python - 解析和存储 HTML 标签以及文本

javascript - 获取目录文件更改时的 mtime

JavaScript 和 React-native : How to properly move part of a component into a new class?

html - 是否可以仅在背景上使用类似 iOS7 的模糊效果?

html - 如何垂直和水平重复图像?