Ранее я задавал этот вопрос .
Я пробую решение, связанное с аналогичным вопросом, уже сделанным (используя grid вместо flex), но у меня есть некоторые проблемы.
Мне нужно построить сетку графиков (гистограммы). Мой набор данных может быть агрегирован по дням или месяцам.
Очевидно, что если данные агрегируются по месяцам, количество баров намного меньше, чем количество баров, если данные агрегированы по дням.
Ширина графика пропорциональна количеству баров.
Чтобы показать мою проблему, я создал эти простые изображения: каждый прямоугольник представляет гистограмму (как заполнитель).
Большие прямоугольники представляют гистограммы в случае агрегирования данных по дням, а более узкие гистограммы представляют гистограммы при агрегировании данных по месяцам.
В этом примере я предполагаю, что мой набор данных состоит из 6 диаграмм.
Я знаю ширину графика, потому что это просто количество баров для ширины бара.
Я хотел бы, чтобы данные располагались автоматически.
В каждой строке не может быть более двух графиков, между графиком и другим должен быть некоторый пробел, и в последней строке (если она не завершена) диаграммы должны быть выровнены влево. Последний запрос является причиной неправильного использования Flex, поэтому я перешел на Grid.
Итак, я хочу, чтобы, если данные агрегировались по дням, графики должны выглядеть так:
Если данные агрегированы по месяцам, диаграммы должны выглядеть так:
Я пробую сетку CSS, используя этот код:
<div
className="relative ba b--black"
style={{
display: 'grid',
gridTemplateColumns: `repeat(auto-fit, minmax(45%, 1fr))`,
gridAutoRows: SVG_HEIGHT,
gridGap: '10px 5px', // space h, space v
}}
>
{
data.map((plot, plotIdx) => {
return (
<div
key={plotIdx}
className="ba b--black overflow-x-auto"
onScroll={this.handleHorizontalScroll(plotIdx)}
>
<svg
width={SVG_WIDTH}
height={CHART_HEIGHT + MARGINS.bottom + MARGINS.top}
>
// other code...
</svg>
</div>
)
})
}
</div>
(каждая диаграмма может иметь большую ширину, поэтому имеется горизонтальная прокрутка).
Проблема теперь в том, что ячейка каждого графика всегда одинакова, даже если реальное измерение, если диаграмма меньше контейнера.
Данные агрегированы по дням:
Данные агрегированы по месяцам:
Если я использую SVG_WIDTH вместо 45% в выражении minmax, я получу:
в случае, если данные агрегированы по дням, и этот в случае, если данные агрегированы в мой месяц:
Я не использовал px, спасибо! Теперь он работает в случае агрегирования по месяцам, но не в случае агрегирования по дням.
днем (не работает):
по месяцам (работ):
Проблема в том, что на каждом графике должна быть горизонтальная прокрутка, на самом деле, если SVG_WIDTH больше, чем размер отца div, тогда мне нужно добавить прокрутку.
Вот код, который я использовал:
<div
className="relative ba b--black"
style={{
display: 'grid',
gridTemplateColumns: `repeat(auto-fit, minmax(${SVG_WIDTH}px, 1fr))`,
gridAutoRows: PLOT_HEIGHT,
gridGap: '10px 5px', // space h, space v
}}
>
{data.map((plot, plotIdx) => {
const yScale = this.yScale(plot)
const yAxisTicks = yScale.ticks(4)
return (
<div
key={plotIdx}
ref={plotElem => (this.plots[plotIdx] = plotElem)}
className="ba b--black overflow-x-auto"
onScroll={this.handleHorizontalScroll(plotIdx)}
>
// ...
</div>
)}
)}
</div>