Question

是否可以删除或隐藏动画滑块的步骤刻度和标签？我想从滑块下方删除滑块的步骤标记（刻度）及其标签：“红色”，“绿色”和“蓝色”。

但是仍然保持当前帧/步骤标签显示。（位于右侧的滑块上方）

最好是能够使用plotly的布局配置来做到这一点，但是如果可以通过CSS规则隐藏，我将不知所措。

以下示例直接取自其示例页面：https://codepen.io/plotly/pen/NbKmmQ

Plotly.plot('graph', {
 data: [{
   x: [1, 2, 3],
   y: [2, 1, 3],
   line: {
     color: 'red',
     simplify: false,
   }
 }],
 layout: {
   sliders: [{
     pad: {t: 30},
     x: 0.05,
     len: 0.95,
     currentvalue: {
       xanchor: 'right',
       prefix: 'color: ',
       font: {
         color: '#888',
         size: 20
       }
     },
     transition: {duration: 500},
     // By default, animate commands are bound to the most recently animated frame:
     steps: [{
       label: 'red',
       method: 'animate',
       args: [['red'], {
         mode: 'immediate',
         frame: {redraw: false, duration: 500},
         transition: {duration: 500}
       }]
     }, {
       label: 'green',
       method: 'animate',
       args: [['green'], {
         mode: 'immediate',
         frame: {redraw: false, duration: 500},
         transition: {duration: 500}
       }]
     }, {
       label: 'blue',
       method: 'animate',
       args: [['blue'], {
         mode: 'immediate',
         frame: {redraw: false, duration: 500},
         transition: {duration: 500}
       }]
     }]
   }],
   updatemenus: [{
     type: 'buttons',
     showactive: false,
     x: 0.05,
     y: 0,
     xanchor: 'right',
     yanchor: 'top',
     direction: 'left',
     pad: {t: 60, r: 20},
     buttons: [{
       label: 'Play',
       method: 'animate',
       args: [null, {
         fromcurrent: true,
         frame: {redraw: false, duration: 1000},
         transition: {duration: 500}
       }]
     }, {
       label: 'Pause',
       method: 'animate',
       args: [[null], {
         mode: 'immediate',
         frame: {redraw: false, duration: 0}
       }]
     }]
   }]
 },
 // The slider itself does not contain any notion of timing, so animating a slider
 // must be accomplished through a sequence of frames. Here we'll change the color
 // and the data of a single trace:
 frames: [{
   name: 'red',
   data: [{
     y: [2, 1, 3],
     'line.color': 'red'
   }]
 }, {
   name: 'green',
   data: [{
     y: [3, 2, 1],
     'line.color': 'green'}]
 }, {
   name: 'blue',
   data: [{
     y: [1, 3, 2],
     'line.color': 'blue'}]
 }]
});

html, body {
  margin: 0;
  padding: 0;
}
#graph {
  vertical-align: top;
}

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

Answer 1

当前official docs中没有属性，因此请考虑以下替代方法，在该方法中，我们将滑块标签的tickcolor和font.color设置为白色，与背景。

执行此操作的属性如下所示。

tickcolor: 'white',
font: {
  color: 'white'
}

Plotly.plot('graph', {
  data: [{
    x: [1, 2, 3],
    y: [2, 1, 3],
    line: {
      color: 'red',
      simplify: false,
    }
  }],
  layout: {
    sliders: [{
      pad: {
        t: 30
      },
      x: 0.05,
      len: 0.95,
      currentvalue: {
        xanchor: 'right',
        prefix: 'color: ',
        font: {
          color: '#888',
          size: 20
        }
      },
      transition: {
        duration: 500
      },
      tickcolor: 'white',
      font: {
        color: 'white'
      },
      // By default, animate commands are bound to the most recently animated frame:
      steps: [{
        label: 'red',
        method: 'animate',
        args: [
          ['red'], {
            mode: 'immediate',
            frame: {
              redraw: false,
              duration: 500
            },
            transition: {
              duration: 500
            }
          }
        ]
      }, {
        label: 'green',
        method: 'animate',
        args: [
          ['green'], {
            mode: 'immediate',
            frame: {
              redraw: false,
              duration: 500
            },
            transition: {
              duration: 500
            }
          }
        ]
      }, {
        label: 'blue',
        method: 'animate',
        args: [
          ['blue'], {
            mode: 'immediate',
            frame: {
              redraw: false,
              duration: 500
            },
            transition: {
              duration: 500
            }
          }
        ]
      }]
    }],
    updatemenus: [{
      type: 'buttons',
      showactive: false,
      x: 0.05,
      y: 0,
      xanchor: 'right',
      yanchor: 'top',
      direction: 'left',
      pad: {
        t: 60,
        r: 20
      },
      buttons: [{
        label: 'Play',
        method: 'animate',
        args: [null, {
          fromcurrent: true,
          frame: {
            redraw: false,
            duration: 1000
          },
          transition: {
            duration: 500
          }
        }]
      }, {
        label: 'Pause',
        method: 'animate',
        args: [
          [null], {
            mode: 'immediate',
            frame: {
              redraw: false,
              duration: 0
            }
          }
        ]
      }]
    }]
  },
  // The slider itself does not contain any notion of timing, so animating a slider
  // must be accomplished through a sequence of frames. Here we'll change the color
  // and the data of a single trace:
  frames: [{
    name: 'red',
    data: [{
      y: [2, 1, 3],
      'line.color': 'red'
    }]
  }, {
    name: 'green',
    data: [{
      y: [3, 2, 1],
      'line.color': 'green'
    }]
  }, {
    name: 'blue',
    data: [{
      y: [1, 3, 2],
      'line.color': 'blue'
    }]
  }]
});

html,
body {
  margin: 0;
  padding: 0;
}

#graph {
  vertical-align: top;
}

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="graph"></div>
</body>

如何在plotly.js中隐藏/删除滑块刻度/步骤及其标签？

1 个答案: