使用 SVG 和 Javascript 创建图表生成器 Web 应用程序（无第三方包或库）

Posted 2023-03-28

【中文标题】使用 SVG 和 Javascript 创建图表生成器 Web 应用程序（无第三方包或库）

【英文标题】：Use SVG and Javascript to create Chart Generator Web App (no third party packages or libraries)

【发布时间】：2022-01-13 01:22:36

【问题描述】：

我的教授要求我们创建一个仅使用 javascript 和 SVG 生成条形图、饼图和折线图的 Web 应用程序。不允许使用第三方包或库。我已经坚持了好几个星期了，似乎无法弄清楚。

这是我尝试创建 http://nasir9bd.github.io/generate-chartjs/ 的一个很好的例子，作者使用 jquery 和 chartjs，我不允许使用。

如果有人可以向我指出如何仅使用 javascript 和 SVG 创建它的教程？拜托我要疯了！我试过自己编码，但到目前为止。我试过教程，但都只使用库或其他语言。

【问题讨论】：

你见过mdn吗？

【参考方案1】：

我向Mozilla tutorial 学习。 .您必须耐心从头开始阅读，

首先，学习形状 (x,y) 的 2D 位置

其次，学习基本形状（矩形、圆形、椭圆、直线、折线、多边形、路径）。

第三，使用填充、描边和渐变自定义和装饰这些形状。

例子：

要绘制条形图，请绘制一个 <svg> 元素，其中包含 <rec> 元素。 要绘制饼图，请绘制一个 <svg> 元素，其中包含 <path> 元素。 要绘制折线图，​​请绘制一个 <svg> 元素，其中包含一个 <polyline> 元素。

尝试阅读basic shapes部分，做例子，你会得到50%的想法。祝你好运！

【讨论】：

谢谢，我已经阅读了 mdn 文档，并多次阅读了教授的讲义。我可以静态创建图表，但是在使它们动态化时，我遇到了问题。另外，认为我的图表比例间隔已关闭。可能不得不回到绘图板上。我会重新阅读 mdn 文档，也许我错过了一些东西。抄送：@fixiabis

好的，那么试试这个方法：使用 SVG（x 列、y 列、条形图）绘制一个静态图表，然后尝试用它制作一个函数。然后当您遇到代码时回到 ***（例如）。否则，你会得到像我这样的一般性答案，你不能再继续下去了。