Как скрыть / удалить отметки / шаги ползунка и их метки в plotly.js?

Можно ли убрать или скрыть метки и метки шагов слайдера анимации? Я хотел бы удалить маркеры шага ползунка (галочки) и их метки: «Красный», «Зеленый» и «Синий» из-под ползунка.

Однако по-прежнему отображается текущая метка кадра / шага. (над ползунком справа)

Желательно иметь возможность делать это с конфигурацией макета 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>

javascript css plotly plotly.js

14.08.2018 09:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 096

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Спасибо, что в итоге я использовал: transparent для свойств цвета.

— 16.08.2018 01:22

15.08.2018 17:32

Другие вопросы по теме

Кнопка закрытия в модальном окне Bootstrap не работает

CSS фиксированный и абсолютный

Как создать адаптивную таблицу в мобильной верстке с использованием java script, html, css без нижней прокрутки?

Создайте рамку с текстом внутри

Div не получает всю ширину страницы

HTML, JS, получить только отображаемое значение элемента

Фоновое изображение при наведении курсора мыши, эффект кнопки запуска

Bootstrap - Почему моя навигационная панель не отображается на следующей строке?

Объект с svg может только щелкать вокруг него

Угловой импорт глобальных переменных SCSS

Как скрыть / удалить отметки / шаги ползунка и их метки в plotly.js?

Ответы 1

Другие вопросы по теме

Похожие вопросы