Блог

Главная - Вопросы по программированию - Plotly.js — Превращение modeBarButton в переключатель (тумблер) с выключенным по умолчанию

Plotly.js — Превращение modeBarButton в переключатель (тумблер) с выключенным по умолчанию

#javascript #reactjs #plotly #plotly.js

#javascript #reactjs #сюжет #plotly.js

Вопрос:

в plotly.js диаграмма (с помощью react), я могу добавить значок и довольно легко сделать его переключателем. Кажется, что не так просто решить, запускается ли кнопка «вкл.» или «выкл.». В моем случае он всегда включен.

Перепробовал все возможные комбинации приведенных ниже переменных, но безрезультатно.

Можно ли это как-то сделать?

 modeBarButtonsToAdd: [
  {
    name: 'Toggle Hover Syncronisation',
    icon: mouse,
    click: toggleHover,
    attr: 'hover___',
    val: 'hover',
    toggle: true,
  },
],

Ответ №1:

Вы почти сделали это, не устанавливайте attr вообще.

 const trace = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
}

Plotly.plot('chart', [trace], {}, {
  displaylogo: false,
  displayModeBar: true,
  modeBarButtonsToAdd: [{
    name: 'Toggle Hover Syncronisation',
    icon: Plotly.Icons.movie,
    click: () => console.log('click'),
    // attr: 'hover__',
    val: 'hover',
    toggle: true
  }]
}) 
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="chart"><!-- Plotly chart will be drawn inside this DIV --></div>

Примечание: я использовал значок по умолчанию, но вы можете установить любой svg значок, и он будет работать так же. Поиграйте с .active классом и своим переключателем.

Надеюсь, это поможет ^^

Комментарии:

1. Спасибо! Да, используя ваш пример, я могу заставить его работать так, как задумано. Это заставило меня поискать немного больше, и я обнаружил, что проблема, вероятно, связана с React. Без атрибута attr переключатель становится включенным только при наведении курсора мыши на диаграмму. Если для параметра ‘attr’ установлено любое значение, я получаю желаемую функциональность переключения, но начальное состояние всегда включено. Я попробовал свою удачу в codepen, но способ написания приложений с реактивным сюжетом там (с добавлением React.createElement и т. Д.) Мне незнаком, Поэтому на данный момент я не могу привести пример моей проблемы там.

Ответ №2:

Если я понял, что вы хотели бы, это переключаемая кнопка, но неактивная в качестве значения по умолчанию?

Мне не удалось заставить его работать с параметром toggle . Состояние всегда начинается как активное.

Вот обходной путь, который я сделал (код реакции):

В конфигурации Plotly

 modeBarButtonsToAdd: [
  {
    name: 'Toggle Hover Syncronisation',
    icon: mouse,
    click: () => setToggle(isToggled => !isToggled),
    attr: 'toggle-hover-syncronisation',
  },
],

attr будет добавлен к кнопке в dom: data-attr="toggle-hover-syncronisation"

В компоненте

 function Component() {
  const [isToggled, setToggle] = useState(false);

  return (
    <div id="plot" className={isToggled ? 'toggle-hover-syncronisation-active' : ''} />
  )
}

Класс toggle-hover-syncronisation-active доступен, когда кнопка активна

CSS

 .toggle-hover-syncronisation-active a[data-attr=toggle-hover-syncronisation] { // target the a element with the corresponding data-attr
  path {
    fill: rgba(255, 255, 255, 0.7) !important; // override the color with the famous !important (to be careful)
  }
}

Это может быть обходным путем, пока этот ответ на форуме не изменится.
Я пробовал только с Plotly 1.57.1, надеюсь, это поможет 🙂

Метки: