如何为网站创建动态图? [英] How to create a dynamic graph for websites?

问题描述

我对编程世界比较陌生，我想知道如何为正在设计的网站创建以下内容.我将使用一个随机的示例来避免放弃我的应用程序，但是过程应该是相同的.对于不切实际的价值，我会提前道歉:

I'm relatively new to the programming world and I was wondering how I would go about creating the following for a website I'm designing. I will use a random example as to not give my application away, but the process should be the same. I apologize ahead of time for the unrealistic values:

假设某位土木工程师想要进入我的网站并找出埃菲尔铁塔某些位置的机械应力，可以在第一个/第二个观景台的拐角处说(请参阅

Say a civil engineer wants to come onto my website and figure out the mechanical stress at certain points on the Eiffel tower, lets say on the corner of the first/second observation deck (see Image). To make this more general, they want to vary values such as the height and base width of the tower to see how that affects the mechanical stress at those points.

现在，我可以创建用于计算这些应力值的算法.我的问题是，程序员将如何创建此动态图形，以使压力值"显示在图像上的不同位置，并且它们会根据用户输入+算法的值而变化?我的想法如下:

Now, I can make the algorithm for calculating those stress values. My question is, how would a programmer go about creating this dynamic figure, such that the 'stress values' are shown on the image at distinct locations, and they change based off of the values of the user inputs + algorithm? My thoughts are the following:

• 使用HTML/CSS放置图像并设计网页
• 使用JavaScript获取输入，运行算法并计算输出.这还将对图像进行动态更改.

我对JavaScript的使用经验为零(我以前使用自己的网站就可以使用HTML/CSS).我想我希望在朝正确的方向前进，然后再开始为该应用程序学习错误的语言.

I have zero experience with JavaScript (I'm okay with HTML/CSS as I have built my own website before). I guess I'm hoping to be pointed in the right direction before I go off and start learning the wrong language for this application.

当他们这样做时，很高兴看到埃菲尔铁塔的视觉表示随着高度和基础面积的变化而变化.也就是说，如果您将底边的路宽加宽，而高度则短得多，则中间部分的弯曲会更加明显.显然，这意味着我不会使用图片，而是实际上会根据输入而更改的埃菲尔铁塔的矢量图像模型.那么，要使用这种语言和库来进行这种事情呢?

While they're doing this, it would be nice to see a visual representation of the Eiffel tower change when the height and base area are changed. ie if you make the base way wider and the height much shorter, the bending in the midsection is going to be much more apparent. Obviously, this means I wouldn't be using a picture, but actually a vector-image model of the Eiffel tower that would change based off of the inputs. So what language and what libraries would one use to go about making this sort of things?

感谢所有能提供有关我的问题的见解的人.我真的很感激！

Thank you to anyone that can provide some insight on my issue. I really appreciate it!

迈克

推荐答案

您好，将动态图形集成到网页中的方法有两种；

Hello to integrate dynamic graph in a webpage there are two ways;

首先，您需要创建自己的图形库.为此，您需要充分了解SVG才能制作出美观的图形.

First you need to make your own graph library. For that you need to know SVG well to make a good looking graph.

第二，您可以使用任何现有的库.有很多开源库，其中有些也可以免费使用.使用这些库集成图并不难.

Second, you can use any existing library. There are lot of open source libraries are there some of them are free to use also. To integrate graph using those libraries is not much difficult.

一些图形生成库莫里斯图表，c3.js等的示例.Google搜索将为您提供更多详细的想法.

Some examples of graph generating library morris chart, c3.js etc. Google search 'll give you more detail idea.

正如您所说，您不了解javascript，因此一开始集成图形会有些困难.但是，创建自己的图形库肯定会更加容易.

As you said you have no idea about javascript so it will be a bit difficult at first for integrating graph. But 'll definitely much more easy to make your own graph library.

这篇关于如何为网站创建动态图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！