Блог

Главная - Вопросы по программированию - Javascript plotly радиус границы как

Javascript plotly радиус границы как

#javascript #css #plotly

#javascript #css #плотный

Вопрос:

Есть ли простой способ создать радиус границы для участка в модуле plotly? Я пробовал это, но безуспешно…

 var trace1 = {
    x: time,
    y: scaledData,
    mode: 'lines',
    type: 'scatter'
};

var layout = {
    xaxis: {type: 'date'},
    yaxis: {title: 'Moisture %'},
    width: 320, 
    height: 320, 
    margin: {l: 50, r: 30, b: 50, t: 65, pad: 10},
    paper_bgcolor: '#79ff4d',
    plot_bgcolor: '#c6ffb3',
    borderRadius: '15px',
    title:'Past 24 Hours'
}


return (
    <Plot data={[trace1]}
      layout={layout}
    />
  );

Я также попробовал метод css, но я думаю, что и здесь я делаю что-то не так. Я попытался создать div того же размера и положения и обернуть в него график. Затем помещаем радиус в div, но он находится за моим сюжетом, поэтому мне это не помогает. Не уверен, как выполнить взлом css, но я бы тоже принял этот ответ, хотя и больше работы.

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

1. На момент написания статьи borderRadius это не поддерживаемое свойство, указанное в ссылке Plotly для layout структуры. Если вам нужна закругленная граница вокруг всего компонента plot, я бы посоветовал вам использовать className prop, а затем определить класс CSS, который добавляет закругленную границу (вам, вероятно, потребуется overflow: hidden обрезать содержимое plot).

2. Спасибо. Я не пытался использовать className в фактическом теге plot. Я дам ему кружение.

3. Что ж, после многих попыток все еще не повезло. Не могли бы вы опубликовать краткий пример, пожалуйста?

Ответ №1:

Возможно, можно получить элемент по имени класса, если вы отображаете его на HTML-странице. В моем случае класс был main-svg . В javascript на вашей странице используйте следующее:

 <script>
  var plotDiv = document.getElementsByClassName('main-svg') //class name of plotly main area
  plotDiv[0].style.borderRadius = "15px"; //or however round you want
</script>

Ответ №2:

Я только что столкнулся с этим вопросом, так как у меня была та же проблема. Я просто обернул div plotly plot div div и применил класс css с border-radius помощью and overflow: hidden , как упоминалось ранее. Это сработало для меня.