这个问题包含了很多内容。我会尽力回答这一切，但请耐心等待。因为我希望涵盖这么多的内容，请记住，我所说的很多内容都是不准确的，您绝对应该阅读更多关于这些主题的内容。如果您喜欢它，您即将进入一个充满编程可能性的全新世界，所以请慢慢来，尝试按照自己的步调沉浸其中。
首先，关于网络技术的一些基础知识。在这里要理解的最基本的事情可能是 client 和 server 之间的分离。这些术语在软件讨论中广泛使用，指代处理、存储和提供数据的事物（服务器）以及允许用户请求、查看、交互和更改该数据的事物（客户端）。客户端和服务器的具体内容会根据您所谈论的上下文类型而有很大差异，但在 Web 开发的世界中：
通常假定客户端是 Web 浏览器。有许多不同的网络浏览器（例如 Chrome、Firefox、Safari、Internet Explorer/Edge、Opera ……），它们都有自己的怪癖，但总的来说，如果你不尝试任何太花哨的东西，你就会坚持对于最新版本的浏览器，无论您使用哪种浏览器查看网页，您的结果都将基本相同。
在谈论“服务器”时，您可以根据使用它的句子来指代一些东西：您编写的服务器端代码（稍后会详细介绍），处理您的服务器端代码并为您的网页提供服务的软件（这将是 Apache 或 Tomcat），或运行上述软件的铝、硅和塑料的物理集合（即计算机，任何东西，从您的笔记本电脑到专用机器）。出于本次讨论的目的，我们将坚持前两个。
正如我之前所说，客户端/服务器区别的最重要部分是在呈现和启用与客户端上的数据交互与处理和存储之间的关注点分离 em> 服务器上的数据。尽可能将它们分开；从长远来看，这将使您的生活更轻松。客户端代码不应该知道数据是如何存储或处理的；这是服务器的工作，客户端不需要知道。同样，您在服务器上编写的代码根本不应该关心数据是如何格式化并呈现给用户的。相反，它应该尝试以易于以多种不同方式处理的格式提供数据。
但我正在超越自己。首先，我们需要谈谈您提出的技术问题。因此，让我们深入研究一下。
客户
通常，服务器和客户端使用不同的编程语言1。浏览器中使用了三种主要语言，每种语言都有一个独特的目的，与其他两种语言的目的相辅相成。如果我踩到你已经走过的地方，请原谅我（随意略读或跳过）；我在这里为初学者写作，所以我想确保涵盖所有基础。
HTML
HTML（超文本标记语言）是构建网页的绝对基础。 HTML 的工作是描述页面的结构和其中呈现的数据。 HTML 将内容分成多个部分，包括页眉、页脚、文章、段落、旁白和其他此类容器。 HTML 还告诉浏览器有关图像、视频和 Flash 游戏的信息，哪些文本或图片应该是指向网络中其他地方的链接，哪些文本应该强调或者你在哪里制作强项。它可以包含包含各种输入设备的表单，并且当您提交表单时，它可以告诉浏览器将该表单的内容发送到哪里。换句话说，它描述了文档的组成、内容部分之间的关系，以及在某种程度上，文档某些部分的目的2。
HTML 看起来像这样：
<html>
<head>
<title>A Sample Web Page</title>
</head>
<body>
<header>
<h1>Sample Code FTW!</h1>
</header>
<main>
<section id="introduction">
<h1>Introduction</h1>
<h2>Where it all begins...</h2>
<p>
This is the first paragraph of the intro.
</p>
<p>This is the second one.</p>
</section>
<section id="picture-show">
<h1>Pictures</h1>
<h2>They're fun!</h2>
<p>Here is a cat:</p>
<img src="https://i.imgur.com/MQHYB.jpg" />
<p>Here are some more (the internet is full of these things):</p>
<img src="https://i.imgur.com/sHQQJG5.gif" />
</section>
</main>
<footer>
<small>© KenB 2015; All rights reserved. (just kidding, do what you want with it)</small>
</footer>
</body>
</html>
这里是查看上述内容的链接：http://codepen.io/kenbellows/pen/GZvmVy
正如您点击该链接所见，从技术上讲，您可以仅使用 HTML 制作整个网页。问题是，这很无聊。首先，它非常简单；这是因为 HTML 不包含格式信息。它有结构，但没有布局、颜色、字体、边框或任何其他与演示相关的信息；这就是 CSS3 的工作。其次，它完全是静态的；这是因为 HTML 不是用来描述动态内容或行为的。 HTML 是故意静态的。如果您想移动、更改或对用户交互做出反应，如果您想根据动态计算显示任何动态内容，那么您需要 JavaScript。
在此处了解有关 HTML 的更多信息：https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics
CSS
CSS（层叠样式表）解决了格式问题。如果您正在编写一个静态页面，每次加载页面时只显示相同的内容，并且不需要任何用户交互，例如博客文章，那么您可能只需要 HTML 和 CSS。
这只是我在那里发布的那个 HTML 的一个小 CSS：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
background-color: #ccc;
}
header, main, footer {
margin: 1em auto;
width: 60%;
padding: 1em;
}
header {
text-align: center;
}
header > h1 {
font-size: 4em;
}
main {
background-color: #fff;
}
main h1 {
font-size: 2.5em;
margin-bottom: 0;
}
main h2 {
font-size: 1.5em;
margin-top: 0;
}
还有一个链接：http://codepen.io/kenbellows/pen/wGqewE
看看简单的样式可以为文档做什么？
了解更多关于 CSS 的信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
JavaScript
JavaScript 为网页的所有动态部分提供动力4。这是您所谈论的图表中最重要的部分。与 HTML 和 CSS 不同，JavaScript 是一种真正的、适当的编程语言，图灵完备和一切，具有您期望从现代语言中获得的所有常见的分支、循环、函数和面向对象的结构。正因为如此，它比 HTML 或 CSS 复杂得多，掌握它所需的时间与掌握任何其他成熟的编程语言一样长。
在此处了解有关 JavaScript 的更多信息：https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics
框架
与任何其他现代语言一样，JavaScript 具有大量 为它编写的库和框架，可帮助您处理编写 Web 应用程序中许多更杂乱、更模板化的部分。 Angular.js，你提到的那个，是目前特别流行的框架，但你应该知道它只是众多框架中的一个。不过，不要误会我的意思，这是一个很好的。但有一点需要牢记：如果您刚开始使用 JavaScript 作为一门语言，那么首先跳入框架可能不是最好的主意。一方面，您只是在增加启动和运行所需的知识量；另一方面，这一点非常重要，您可能应该在开始使用框架之前学习该语言本身，以避免依赖该框架。我认识太多的开发人员立即开始使用 Angular，然后一年后并没有完全理解为什么代码会这样，因为他们没有花时间去深入理解的语言基础。 Angular 很棒，我一直都在使用它，但是，再次帮自己一个忙，至少阅读我上面链接的关于 JavaScript 的 MDN 教程，并在开始使用 Angular 之前尝试编写几个玩具应用程序。
关于您的应用创意的想法
我实际上认为，就您的应用程序而言，您根本不需要服务器，如果您决定将其发布到 Web 或公司的 Intranet 或其他东西上，则可以托管它。我将在下面简要讨论服务器以回答您的问题，但实际上，如果您只需要获取一些用户数据并以图表的形式实时显示，您只需使用一些 JavaScript 即可。 Angular 肯定会有所帮助，因为您听起来像是想要实时更新图表。您应该研究一些基于 Angular 的图表/图形库，例如https://jtblin.github.io/angular-chart.js/
服务器
通常，服务器处理数据处理和存储。让我直接回答您的问题，而不是像我为客户所做的那样深入理论：
Tomcat 和 Apache - Tomcat 和 Apache HTTP Server 是 Web 服务器的两个选项。 （这些人符合我上面给出的“服务器”的第二个定义。）它们绝对是流行的选择，尽管 Apache 往往更流行于生产服务器，而 Tomcat 更流行于开发设置（根据我的经验；人们一直在争论这个问题)。
Spring - Spring，包括其所有各种模块和工具（SpringMVC、Spring Security、Spring Tool Suite 等），是一个 Java 框架，可帮助您编写服务器代码（服务器定义#1)。在我个人看来（物有所值），Spring 非常适合具有大量移动部件的大型复杂应用程序，但对于像您描述的那样简单的应用程序来说却是不必要的复杂。
MySQL - MySQL 与所有 SQL 风格一样，是一个数据库程序。它将数据存储在表中，并为您提供一个界面，以各种方便的方式查询该数据。数据库很棒，MySQL 是一种流行的选择，但重要的是要弄清楚您的项目是否需要数据库。您是否打算存储用户输入的数据以备后用？如果没有，请跳过数据库。
其他语言 - Web 服务器代码可以用任何可以在命令行上运行的语言编写。如果您喜欢 Java 并且擅长它，请坚持使用 Java。如果你想冒险，不妨看看 Node.js，一个 JavaScript 服务器解决方案；无论如何，你正在学习 JavaScript，对吧？这完全取决于个人喜好以及什么可以为您完成工作。无需学习 PHP（绝对无需学习 C，天哪；请不要用 C 编写您的服务器代码），只需为像您这样的简单应用程序编写后端得到。听起来你已经为这个项目学到了很多东西；无需在您的盘子中添加更多内容。
1.（最好在完成上述所有操作后再次阅读此脚注。）一个越来越流行的值得注意的例外是在服务器端使用 @ 987654328@。如果您在客户端尝试 JavaScript 并坠入爱河（就像我们中的许多人一样），不妨试试 Node。
2.了解 HTML 工作原理后，请继续阅读 semantic markup。
3. 更准确地说，HTML不应该包含任何此类信息，尽管它在技术上可以包含其中一些信息.这是 90 年代末/2000 年代初 CSS 之前的遗留物，当时大量的大小、字体和颜色信息都存储在标记中。请帮自己一个忙：将格式留给 CSS。
4. 除了一些更高级的 CSS 规则之外，您可以使用这些规则来获得非常基本的悬停效果和简单的动画。 JavaScript 对于任何涉及计算、迭代、逻辑，基本上任何不平凡的事情仍然是必需的。