ag-grid JS не отображается, даже если высота задана с помощью сетки CSS - PullRequest
Новая
       24

ag-grid JS не отображается, даже если высота задана с помощью сетки CSS

0 голосов
/ 21 октября 2019

Я хотел бы иметь ag-grid под графиком на моей веб-странице.

Если я не установлю вручную свойство height ag-grid, оно не будет отображаться в этом jsFiddle .

Я инициализирую сетку следующим образом: 

let moves_data = res.result;
let gridOptions = {
    rowData: moves_data,
    columnDefs: [
      {headerName: 'date_peak',field: 'date_peak'},
      {headerName: 'date_through',field: 'date_through'},
      {headerName: 'udl_peak',field: 'udl_peak'},
      {headerName: 'udl_through',field: 'udl_through'},
      {headerName: 'value',field: 'value'},
    ]
  };
let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
movesGrid.gridOptions.api.sizeColumnsToFit();
movesGrid.gridOptions.columnApi.autoSizeAllColumns();

HTML: 

  <div id="results_container">
    <div id="graph-container" class="dygraph-container">
      <div id="graph"></div>
    </div>
    <div id="results" class="ag-theme-balham" style="height:300px;"></div>
  </div>

и CSS, которыеЯ ожидаю, что позаботится о проблеме высоты: 

#results_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 400px;
}

Как я могу получить ag-grid для отображения, используя только свойства CSS grid-layout? Если я не могу использовать их, почему это так?

1 Ответ

0 голосов
/ 21 октября 2019

Есть несколько способов установить высоту для вашей сетки.

1 - установить domLayout: 'autoHeight' для свойства сетки ( Это кошмар для большого количества строк )

Когда вы устанавливаете autoHeight, вы можете установить минимальную высоту для вашей сетки, но невозможно указать максимальную высоту.

Как описано в , это документация :

Когда domLayout='autoHeight', тогда ваше приложение не должно устанавливать высоту в div сетки, так как div должен иметь естественный поток для соответствия содержимому сетки. Когда автоматическая высота отключена, ваше приложение должно установить высоту в сеточном элементе div, поскольку сетка будет заполнять элемент div, который вы предоставляете.

  • Когда вы устанавливаете различное количество строк в сетке, сетка будетизмените его высоту, чтобы он соответствовал строкам.
  • Поскольку высота сетки превышает высоту браузера, вам потребуется использовать вертикальную прокрутку браузера для просмотра данных (или прокрутку iFrames, если вы смотрите наприведенный ниже пример).
  • Высота также будет изменяться при фильтрации, чтобы добавлять и удалять строки.
  • Если у вас есть закрепленные строки, размер сетки будет соответствовать размеченным рядам.
  • Вертикальная прокрутка не произойдет, однако горизонтальная прокрутка, включая закрепленные столбцы, будет работать как обычно.
  • Можно переместить сетку в режим «полной высоты» и из него, используя api.setDomLayout() или изменяя привязанное свойство domLayout.

2 - установите его в своих скриптах ( Как-то лучше, чем autoheight ): 

gridOptions.api.setDomLayout('normal');
document.querySelector('#results').style.height = '400px';

3- Если вы предпочитаете использовать CSS, вы можете сделать это, используя общие правила CSS, как показано ниже: 

.ag-theme-balham .ag-cell
{
    height: 300px;
}

4- Или, если вы хотите использовать каркас макета сетки, вы можете найти его пример здесь .

Вот окончательный вид, реализованный на вашем примере (я уменьшил объем данных, чтобы не касаться границы предела количества символов SO): 

$(function() {

  let res = {
	"data": [{
	  "date": "2000-01-03",
	  "value": 101.45
	}, {
	  "date": "2000-01-04",
	  "value": 103.22
	}, {
	  "date": "2000-01-05",
	  "value": 104.14
	}, {
	  "date": "2000-01-06",
	  "value": 105.23
	}, {
	  "date": "2000-01-07",
	  "value": 105.34
	}, {
	  "date": "2000-01-10",
	  "value": 105.16
	}, {
	  "date": "2000-01-11",
	  "value": 105.95
	}, {
	  "date": "2000-01-12",
	  "value": 105.79
	}, {
	  "date": "2000-01-13",
	  "value": 106.17
	}, {
	  "date": "2000-01-14",
	  "value": 105.87
	}, {
	  "date": "2000-01-17",
	  "value": 104.9
	}, {
	  "date": "2000-01-18",
	  "value": 105.67
	}, {
	  "date": "2000-01-19",
	  "value": 105.32
	}, {
	  "date": "2000-01-20",
	  "value": 105.47
	}, {
	  "date": "2000-01-21",
	  "value": 104.78
	}, {
	  "date": "2000-01-24",
	  "value": 105.57
	}, {
	  "date": "2000-01-25",
	  "value": 106.04
	}, {
	  "date": "2000-01-26",
	  "value": 105.66
	}, {
	  "date": "2000-01-27",
	  "value": 105.12
	}, {
	  "date": "2000-01-28",
	  "value": 107.13
	}, {
	  "date": "2000-01-31",
	  "value": 107.32
	}, {
	  "date": "2000-02-01",
	  "value": 107.85
	}, {
	  "date": "2000-02-02",
	  "value": 108.16
	}, {
	  "date": "2000-02-03",
	  "value": 107.56
	}, {
	  "date": "2000-02-04",
	  "value": 107.19
	}, {
	  "date": "2000-02-07",
	  "value": 108.62
	}, {
	  "date": "2000-02-08",
	  "value": 109.47
	}, {
	  "date": "2000-02-09",
	  "value": 108.79
	}, {
	  "date": "2000-02-10",
	  "value": 109.27
	}, {
	  "date": "2000-02-11",
	  "value": 108.82
	}, {
	  "date": "2000-02-14",
	  "value": 108.96
	}, {
	  "date": "2000-02-15",
	  "value": 109.22
	}, {
	  "date": "2000-02-16",
	  "value": 109.44
	}, {
	  "date": "2000-02-17",
	  "value": 110.56
	}, {
	  "date": "2000-02-18",
	  "value": 111.09
	}],
	"result": [{
	  "date_peak": "2000-01-13",
	  "date_through": "2000-01-03",
	  "udl_peak": 106.17,
	  "udl_through": 101.45,
	  "value": 4.652538196155742
	}, {
	  "date_peak": "2000-02-02",
	  "date_through": "2000-01-21",
	  "udl_peak": 108.16,
	  "udl_through": 104.78,
	  "value": 3.2258064516129004
	}, {
	  "date_peak": "2000-02-08",
	  "date_through": "2000-02-04",
	  "udl_peak": 109.47,
	  "udl_through": 107.19,
	  "value": 2.127064091799613
	}, {
	  "date_peak": "2000-02-21",
	  "date_through": "2000-02-09",
	  "udl_peak": 111.26,
	  "udl_through": 108.79,
	  "value": 2.2704292673958903
	}, {
	  "date_peak": "2000-03-14",
	  "date_through": "2000-02-24",
	  "udl_peak": 105.12,
	  "udl_through": 111.37,
	  "value": -5.611924216575382
	}, {
	  "date_peak": "2000-03-23",
	  "date_through": "2000-03-14",
	  "udl_peak": 107.24,
	  "udl_through": 105.12,
	  "value": 2.0167427701674123
	}, {
	  "date_peak": "2000-03-31",
	  "date_through": "2000-03-23",
	  "udl_peak": 102.78,
	  "udl_through": 107.24,
	  "value": -4.158895934352847
	}, {
	  "date_peak": "2000-04-11",
	  "date_through": "2000-03-31",
	  "udl_peak": 106.92,
	  "udl_through": 102.78,
	  "value": 4.028021015761829
	}, {
	  "date_peak": "2000-04-17",
	  "date_through": "2000-04-11",
	  "udl_peak": 104.54,
	  "udl_through": 106.92,
	  "value": -2.2259633370744436
	}, {
	  "date_peak": "2000-05-03",
	  "date_through": "2000-04-17",
	  "udl_peak": 109.02,
	  "udl_through": 104.54,
	  "value": 4.285440979529365
	}]
  }

  let moves_data = res.result;
  let gridOptions = {
	rowData: moves_data,
	columnDefs: [{
		headerName: 'date_peak',
		field: 'date_peak'
	  },
	  {
		headerName: 'date_through',
		field: 'date_through'
	  },
	  {
		headerName: 'udl_peak',
		field: 'udl_peak'
	  },
	  {
		headerName: 'udl_through',
		field: 'udl_through'
	  },
	  {
		headerName: 'value',
		field: 'value'
	  },

	]
  };
  let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
  movesGrid.gridOptions.api.sizeColumnsToFit();
  movesGrid.gridOptions.columnApi.autoSizeAllColumns();

  //graph with arrows
  let udl_data = res.data;
  let g = new Dygraph(
	document.getElementById("graph"),
	udl_data.map((x) => {
	  let res = [];
	  for (let col in x) {
		if (x.hasOwnProperty(col)) {
		  if (col.toLowerCase() === "date") {
			res.push(new Date(x[col]));
		  } else {
			res.push(parseFloat(x[col]));
		  }
		}
	  }
	  return res;
	}), {
	  labels: Object.keys(udl_data[0]),
	  underlayCallback: (canvas, area, g) => {
		moves_data.map((row) => {
		  let coordsA = g.toDomCoords(new Date(row.date_through), parseFloat(row.udl_through));
		  let coordsB = g.toDomCoords(new Date(row.date_peak), parseFloat(row.udl_peak));

		  let add_height = -15;
		  coordsA[1] += add_height;
		  coordsB[1] += add_height;

		  canvas.beginPath();
		  canvas.moveTo(coordsA[0], coordsA[1]);
		  canvas.lineTo(coordsB[0], coordsB[1]);
		  canvas.strokeStyle = "black";
		  canvas.stroke();

		  let radius = 5;

		  canvas.beginPath();
		  canvas.moveTo(coordsA[0], coordsA[1]);
		  canvas.arc(coordsA[0], coordsA[1], radius, 2 * Math.PI, Math.PI, false);
		  canvas.fillStyle = "green";
		  canvas.fill();

		  canvas.beginPath();
		  canvas.moveTo(coordsB[0], coordsB[1]);
		  canvas.arc(coordsB[0], coordsB[1], radius, Math.PI, 2 * Math.PI, false);
		  canvas.fillStyle = "red";
		  canvas.fill();

		});
	  }
	}
  );
  let the_width = $("#tabs-research-tabs-udl_move-graph-container").css("width");
  $("#tabs-research-tabs-udl_move-graph").css("width", the_width);
  g.resize();

})
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50vh;
width: 100%;
}

#left {
	grid-row: 1/1;
	grid-column: 1/1;
	background: gray;
}

#results {
	grid-row: 1/1;
	grid-column: 2/2;
	overflow: hidden;
}

#right {
	grid-row: 1/1;
	grid-column: 3/3;
	background: gray;
}
<div id="results_container">
<div id="graph-container" class="dygraph-container">
  <div id="legend" class="dygraph-legend"></div>
  <div id="graph"></div>
</div>
<div class="container">
  <div id="left"></div>
  <div id="results" class="ag-theme-balham"></div>
  <div id="right"></div>
</div>
</div>
<script type='text/javascript' src='http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

Если пример подвержен ошибкам, вы можете найти рабочий пример здесь в скрипке

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...