将宽度设置为百分比，但均匀地渲染div

Question

我正在尝试为.Net MVC编写一个图形函数来生成纯HTML条形图。我想将每个条形的宽度设置为父div的百分比，以便在用户重新调整浏览器大小时图表可以正确缩放。

但是，我通常在图表中有大约300个条形图，因此每个条形图的宽度最终计算为1.54px（例如）。这对于浏览器呈现条形图（至少在IE和Chrome中）是多么可怕。

如果我使用像素的整数值（即2px，而不是1.6px）为每个条设置固定宽度，则条的不均匀渲染会消失。但是，如果我这样做，图表不会随浏览器缩放。

是否有最佳实践＆＃34;解决这个问题？我可以使用浏览器调整条形，而不允许条形宽度的非整数值吗？

编辑：还有一点要注意，我的老板对第三方库有一种病态的不信任，因此从头开始编写这个功能。

Answer 1

您是否看过http://d3js.org/这是一个适用于各种图表的库。它负责计算空间。具有很好的效果，并且易于在javascript中使用绑定。

Answer 2

正如银色战士指出的那样，各种图表都有很多图形库。这些解决方案再次分为基于Canvas和基于HTML。基于画布的库可能无法在某些旧浏览器上运行。一些解决方案（如谷歌图表）在处理旧浏览器方面要好一些。

因此，根据您希望为旧浏览器提供的支持，您可以在库之间进行选择。一个简单的谷歌搜索给了我以下链接 http://techslides.com/50-javascript-charting-and-graphics-libraries

Canvas based - d3js.org，visjs.org https://developers.google.com/chart/

如果您仍然专注于编写自己的代码来相对定位div，那么“margin”css标记的“auto”值应该会有所帮助。

[编辑] - 抱歉误读了这个问题，并认为问题与身高有关。可以使用javascript在图表数据可用后设置宽度。为每个条指定一个类，计算可用宽度，然后除以总计数。因此，您可以根据页面大小动态获取宽度。