使用SVG和Javascript创建图表生成器Web应用程序(没有第三方包或库)



我的教授让我们创建一个web应用程序,该应用程序仅使用javascript和SVG生成条形图、饼图和折线图。不允许使用第三方程序包或库。我已经被这个问题困扰了好几个星期了,似乎想不通。

这是我试图创造的一个很好的例子http://nasir9bd.github.io/generate-chartjs/作者使用了jquery和chartjs,我不允许使用它们。

如果有人能给我介绍一下如何只使用javascript和SVG创建它的教程?求你了,我快疯了!我自己也试过编码,但只到目前为止。我尝试过教程,但都只使用库或其他语言。

我学习了Mozilla教程。。你必须耐心从头开始阅读,

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

其次,学习基本形状(矩形、圆形、椭圆、直线、多段线、多边形、路径(。

第三,使用Fill、Stroke和Gradients自定义和装饰这些形状。

示例:

  • 若要绘制条形图,请绘制包含<rec>元素的<svg>元素
  • 要绘制饼图,请绘制内部包含<path>元素的<svg>元素
  • 要绘制折线图,请绘制内部有<polyline>元素的<svg>元素

试着阅读基本形状部分,做一些例子,你会得到50%的想法。祝你好运

相关内容

最新更新