Чтобы изменить размер и сделать таблицу скрипок Potly JS отзывчивой - PullRequest
Новая
       31

Чтобы изменить размер и сделать таблицу скрипок Potly JS отзывчивой

2 голосов
/ 08 апреля 2020

Я хочу, чтобы таблица скрипок (я использую сюжетную библиотеку js) была отзывчивой. Но также не хочу, чтобы он сжимал так сильно (он сжимается в соответствии с div, в котором он хранится). Я попытался включить свойство autosize скрипки в false, а затем установить высоту и ширину. В этом случае график не сжимается (остается так, как я хочу), но теряет свою отзывчивость. Есть ли способ сделать этот график отзывчивым, но не таким сжатым? Вот мой код: 

<Plot
        config = {{ displayModeBar: false }}
        data={[
          {
            type: 'violin',
            y: this.props.data,
            points: 'none',
            box: {
              visible: true
            },
            boxpoints: false,
            line: {
              color: 'red'
            },
           opacity: 0.6,
            meanline: {
              visible: true
            },
            x0: "OEE"
          }
        ]}
        layout={{
          title: "Comparison",
          yaxis: {
          zeroline: false
              },
              // autosize: false,
          // height: 300,
          // width: 500,
          // responsive: true
        }}
        useResizeHandler= {true}
        style= {{width: "100%", height: "100%"}}
      />

Див, внутри которого хранится скрипка: 

<div className="chart-wrapper" style={{ height: "35vh" }}>
   <ViolinChart data={this.state.violinChartData} /> 
</div>

1 Ответ

0 голосов
/ 27 апреля 2020

Я получил решение вышеуказанного вопроса. Plotly JS также предоставляет свойство «margin» для своих графиков. Таким образом, предоставление полей позволит вам настроить график так, как вы хотите, чтобы он был 

var layout = {
  margin: {
    l: 25,
    r: 25,
    b: 25,
    t: 25
  }
};

Это то, что я добавил в свой код. Установка automargin = true автоматически увеличит размер поля.

Подробнее об этом можно узнать здесь .

...