TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Responsive bar charts in HTML and CSS

140 点作者 sippndipp11 个月前

10 条评论

sings11 个月前
I’ve been using a similar technique to display our poll data[1] for several years, although without using grid. If you can measure the text because you know which font will be used, and store the widths of various characters, you can take a little more control over layout too, even while rendering server-side.<p>I also started writing a simple responsive SVG charting library[2], but the author is right in that there are some fluid layouts that are just impossible to realise with SVG at the moment.<p>[1]: <a href="https:&#x2F;&#x2F;poll.lowyinstitute.org&#x2F;report&#x2F;2024&#x2F;global-powers-and-world-leaders&#x2F;" rel="nofollow">https:&#x2F;&#x2F;poll.lowyinstitute.org&#x2F;report&#x2F;2024&#x2F;global-powers-and...</a><p>[2]: <a href="https:&#x2F;&#x2F;stephenhutchings.github.io&#x2F;shown&#x2F;" rel="nofollow">https:&#x2F;&#x2F;stephenhutchings.github.io&#x2F;shown&#x2F;</a>
评论 #40952102 未加载
patze11 个月前
Making charts (of any kind) accessible is a really hard endeavour. I watched the demo videos and if I’m allowed to make a suggestion... Add the context to the data points. A simple “50k” might not cut it for people navigating the plot with their fingers over a smartphone.<p>Full disclosure: I worked with those peeps a decade ago and really love their work.
评论 #40953382 未加载
felixfbecker10 个月前
&gt; In SVG, all shapes are absolutely positioned. Text does not wrap automatically.<p>This is not really true — you can position elements inside the SVG coordinate system using percentages and you can mix absolute coordinates and percentages. This allows you to have elements grow and shrink in reaction to width and height without distortion.<p>Wrapping text is possible with &lt;foreignObject&gt;, simply let HTML&#x2F;CSS do the text layout wherever you need text within the SVG.<p>However it is still true that you usually want to do a bunch of calculations in JS based on the width to know how many chart ticks you want, how many labels, etc. But that is pretty easy to compute with the helpers from D3.
评论 #40962511 未加载
xnx11 个月前
Actual live example of said charts: <a href="https:&#x2F;&#x2F;codepen.io&#x2F;molily&#x2F;pen&#x2F;JjqgxVR" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;molily&#x2F;pen&#x2F;JjqgxVR</a>
locallost10 个月前
I like the work, it looks good and (probably) works well, but there are some assumptions here that are off:<p>&gt; When the container size changes, for example due to a browser resize or orientation change, the JavaScript needs to compute all SVG positions and sizes from scratch. Assuming this takes 50-100ms per chart, a page with 20 charts freezes the browser for 1-2 seconds.<p>I was once calculating positions for some complex labels on a timeline like chart (e.g. you have two entries close to each other and you would align the labels left and right to fit, but if there more you needed to stack them etc) and it did not take 50-100ms even for hundreds of entries. My code was neither pretty nor very efficient. Their 5-10 data points especially would not take that long. But even then you can always calculate them one by one and not block page interaction.<p>In addition people don&#x27;t really resize their browsers that much anymore, if they ever did. The majority of traffic is mobile and there even the occasional phone rotation is not really that common, especially not for reading articles.
green-eclipse11 个月前
Why are all these responsive charts displayed as images? Are they not proud of their work?
评论 #40950604 未加载
nipperkinfeet10 个月前
What in the world? Horrible website. Text is zoomed so large on my 4k screen.
KingOfCoders10 个月前
Lovely!
esafak11 个月前
An article about responsive bar charts without them? (Firefox)<p>I&#x27;m not hip enough to find this funny.
评论 #40949624 未加载
评论 #40949668 未加载
评论 #40949727 未加载
评论 #40949484 未加载
nhggfu11 个月前
&quot;While responsive and accessible SVGs are possible, they require manual client-side JavaScript logic&quot;<p>an oxymoron, given that many assistive devices don&#x27;t run JS [eg text-browsers like lynx]
评论 #40949679 未加载
评论 #40949691 未加载