使用 JavaScript 创建图表

引言

JavaScript 可以使用用户提供的数据动态生成条形图。这是由于条形图本身就比较简单，通常仅由不同长度的图像组成。我们使用 JavaScript 动态编写每个图像，并根据输入的数据计算其长度。

我们只需要一个简单的 1x15 图像即可开始。

如果我想将此图像拉伸到 50x15，我可以通过 JavaScript 生成图像来实现。

<script>
document.write(<img src="poll.gif" width="50" height="15">')
</script>

这就是动态条形图的基础！以下是我编写的一个简单的脚本，演示了使用 JavaScript 创建图表的示例。

<script>
var graphtext=new Array("Jill", "Bob", "Tony") //Graph items
var graphvalue=new Array("60", "45", "95") //Graph values (in percentage, so 70=70%)
var barlength=200
for (i=0;i<graphtext.length;i++)
document.write (graphtext[i]+
        ': <img src="poll.gif" width="'+
        graphvalue[i]/100*barlength+
        '" height="15"><br>')
</script>

Jill：
Bob
Tony

这里的关键在于这段代码

width="'+graphvalue[i]/100*barlength+'"

这使得图表的宽度是动态的，并且基于用户提供的数据。基本上，每个宽度都是通过将输入值除以 100 来获得其百分比，然后乘以基线条形图像的长度来计算得出的。

就是这样！使用 JavaScript 实现的动态图表。您可能需要查看一个名为 JavaScript Graph-It 的脚本，来自 JavaScript Kit，它是一个用户友好且更复杂的 JS 图表脚本。我就是从那里获得了本教程的一般想法。