简单的HTML条形图生成

Question

我是一个c ++ Linux的家伙，正试图用html或js制作条形图。 我试着用谷歌搜索如何生成条形图。但是无法正确理解它。

我有一个包含以下内容的文件（content.txt）：

A - 0
B - 3
C - 1
D - 2
E - 2 
F - 0

所有字母都需要在Y轴上表示。 条形颜色基于文件中的值。 （总是值将在0到3的范围内）

所有四个值都需要用不同的颜色表示。

图表如下所示。 请帮我读取content.txt文件（它将其值A动态地改为F到0到3之间）＆amp;表示为图形。

Answer 1

• 你应该知道，SO不是代码工厂。
• 除非您不使用最新版本的JS-Api，否则无法在没有服务器端语言支持的情况下从文件系统中读取数据。
• 如果您可以管理从文本文件中读取数据，请将数据放入列表中（Json，Array，XML）。
• 可以使用图像创建每个单个条的长度，以及为每个图像创建适当的公式。您可以使用Javascript将计算值分配给图像对象。
• 我认为最大的挑战是创建轴。我的第一个想法是使用没有边框，单元格边距和单元格填充的表格。好消息是，你可以给每个细胞提供单边界。 CSS将是你最好的朋友。
• 坏消息：我不知道如何添加箭头。

当然，你可以使用div元素。挑战在于将它们安排在合适的外观中。我认为使用div而不是table更容易一些。

Answer 2

如上所述，最难的部分是从文件系统读取数据。如果您可以将数据放入JSON blob或对象中，那就容易多了。

您是否希望条形图在HTML上完整？对于简单的图表，我强烈推荐ChartJS（http://www.chartjs.org/docs/#bar-chart）...它非常简单，尤其是如果您的数据是JSON / Obj格式。