javascript - 复选框不起作用。尝试在 flot 中动态添加/删除网格线。

Question

我会添加代码，然后我会解释。

相关 HTML 片段:

<div id='gridButton'>
    <form>
         <input type="checkbox" id="gridCheck" value="showGrid">Show Grid
    </form>
</div>

我使用了两种不同的方法来测试复选框，但都不起作用。

版本 1:

$('#gridCheck').on('change', function(){
    if(gridToggle = 0) {
        gridToggle = null;
    } else {
        gridToggle = 0;
    }
});

版本 2:

$('#gridCheck').on('click', function(){    
   if ($(this).is(':checked')){
      gridToggle = null;
   } else {
      gridToggle = 0;
   }
});

这是 gridToggle 连接的内容(这是整体选项的一部分):

    xaxis: {min: -10, max: 60, tickLength: gridToggle},
    yaxis: {min: -5, max:40, tickLength: gridToggle}

所以我遇到的问题是当复选框被点击时它不会改变网格线。但是，如果我手动将它们放入代码中，它们就会起作用。

Answer 1

一些想法:

1.) 这个 if(gridToggle = 0) { 是错误的，我想你的意思是 if(gridToggle == 0) {

2.) 输入标签缺少关闭元素，应该是:

<input type="checkbox" id="gridCheck" value="showGrid" />

3.) 最后(你真正的问题)，你需要在更改属性后重新绘制图表:

$('#gridCheck').on('change', function(){        
    var gridToggle = $(this).is(':checked') ? null : 0; // on or off
    var opts = myPlot.getOptions();
    opts.xaxes[0].tickLength = gridToggle; // modify existing plot options
    opts.yaxes[0].tickLength = gridToggle;
    myPlot.setupGrid(); // re-init grid
    myPlot.draw(); // and redraw
});

这是一个 fiddle .