这个任务是一个基于留学生JavaScript代写的任务，这个文档概述了为了获得满分必须满足的要求。本文件适用于内部和外部学生，所有工作都是单独完成的。每个人都需要使用jQuery JavaScript库来生成基于JSON数据的多个图形，并且在被问及时能够演示和解释它们的JavaScript代码。

　　The Assignment

　　您的任务是使用预先配置的web服务和几个可用于使用统计局数据的选项之一绘制统计局温度和降雨量数据!选项包括：

　　一。jquery(使用ajax请求)

　　2.D3(当前版本，V5.1——比过去实践中使用的版本更新，这也需要一些研究)

　　您的任务是使用ajax数据，并按照以下要求将它们显示在climate/index和climate/details页面上。

　　要求

　　您需要完成以下几项任务：

　　任务1。气象站气候数据[20%]

　　一。我们需要的第一件事是在我们已经为您创建的高潮/索引页面中显示一个来自车站控制器的数据表。此表应列出

　　·车站编号和名称

　　·气候记录涵盖的年份

　　·可用记录总数

　　·所有记录的总数(可用+缺少)

　　·指示可用记录和丢失记录数的工具提示

　　·指示行可单击的工具提示

　　以如下所示的引导表格式：

　　2.当鼠标光标位于行上时，该行应自动亮显(并保持可读性)。如果颜色合适，可以使用预先存在的bootstrap类，或者使用链接在页面顶部的外部样式表创建自己的css选择器。如果有疑问，请查阅引导表信息。

　　三。此表必须在单个

　　元素使用带有超时函数的ajax webservice数据源。这必须使用最好的jquery方法完成，即appendto()。页面上不能有硬编码的表元素。只有div.

　　四。数据不能包含在类名中。除了用于div的id之外，不能创建其他id。用于创建元素的字符串不能包含类名或其他html属性。我们希望在这里有良好的编码实践!

　　5个。如果ajax失败，表div应该包含一个标准错误消息(例如，“未能加载站点数据”)。如果请求失败，则不应存在表

　　任务2。年度站图〔40%〕

　　我们需要的第二件事是从上面表中描述所选站点的数据的条形图。点击一个站点应该把我们带到已经为你创建的气候/细节页面。

　　一。这个图可以从div元素(或者任何其他合适的元素，比如svg，如果使用的是d3 v5，而不是table元素)生成。为此，您需要研究一些主题，例如如何使用“for each”循环，以及如何使用所选的javascript库创建html元素或附加html。

　　建议使用静态HTML和自定义CSS类静态设计图表，以便确定实现图表所需的HTML设计。

　　·一旦你的“静态”图是有序的，把它翻译成你的Ajax jQuery。

　　·使用控制台。log(“您的文本”+ JavaScript变量);帮助您在编写代码时进行调试。如果您无法使web服务正常工作，请使用浏览器控制台(ie中的f12)和浏览器中的网络流量来查看是否正在发送和接收数据。

　　2.条形图应该有一个年份，在图的每一个条形图的左边，在每一个条形图中，右边和最大的温度明显地与右边对齐(但是没有被压在右边的边框上!)。需要使用适当的函数将温度格式化/固定到小数点后一位，使其正确循环。站的名字必须在页面的顶部清楚地标明。

　　三。将需要调整条以消耗最大可用的图形空间(即，如果使用div元素，则使用%%而不是px)。这将是棘手的，因为你有最小和最大温度。最低温度需要使用一些最小宽度/偏移量，以便可以看到负数。使用负值时，可能需要使用math.abs()函数来帮助解决此问题。如果数据不可用，则不应创建条形图或将其附加到图形中。

　　四。如图所示，条的颜色应反映最小或最大数据。你选择的颜色应该看起来很专业。所有年内最小值和最大值的颜色应与其余部分清晰地区别开来。这可以通过使其更不透明度来实现。

　　5个。必须设置条形图的动画。当你第一次登陆页面时，条码应该从0%增加到实际大小(由它们的摄氏度决定)。

　　6.当鼠标悬停在图表上的一年上时，整个水平部分应该高亮显示，指示年份以及最低和最高温度。当它高亮时，工具提示应该清楚地表明可以点击该栏查看更详细的信息：“点击查看XX年的月度详细信息”。

　　7号。该图需要X轴和Y轴标记。它们可以旋转或放置在图形的左上角和右下角，如图所示

　　8个。如果图形加载失败，则数据div应包含标准错误消息。失败时不应出现任何图形元素。

　　9号。必须有一个按钮可以将用户从上一页返回到气候站的列表中。

　　10个。点击高亮的年份应重新刷新页面并加载所选年份和站点的气候数据的每月分类(作业的第3部分)。

　　任务2奖励1–设置温度值动画[10%]

　　当杆长时，使温度从0°C开始，并增加到其最终值(数字应该像计时器向上计数)。必须尽可能高效地完成这项工作!没有额外的插件可以使用，你只需要动画功能。

　　示例：[ 0 ] ->(0.1)->(0.2)-> -> -> ->(33.5)->(33.6)，因为条在页面上生长。不要忘记你需要保持摄氏度的格式化。

　　任务2奖励2–详细数据卡[10%]

　　图形宽度需要稍微减小一点，以实现一个时尚的数据卡，在当前鼠标突出显示的图形中显示当年的详细信息。这可能有点棘手，以充分发挥作用，因为数据卡将需要定位在当前突出显示的一年-即使该页面滚动，以查看选定的一年。下面提供了一个示例模型。你将需要最大限度地利用额外的气候细节的满分，它必须以专业的方式呈现。当鼠标不在图形上时，您将需要对卡片执行某些操作(即将默认文本更改为“从图形中选择一年以查看详细信息”，或执行某些操作)。

　　任务3。每月明细表[30%]

　　单击年度图表中的年度条形图将使条形图的动画降为零，然后具有选定的每月数据细分的图表将从左到右依次增长。月份名称需要清楚地显示，并与垂直Y轴对齐。您可能需要淡出Y轴值以使其看起来专业。与年度图表一样，在栏+年上悬停应该清楚地显示数据显示的月份。您还需要包括一个按钮，该按钮将重新建立当前正在观察的站点的年度图表。

　　任务3奖励3–详细数据卡[10%]

　　图形宽度需要稍微减小一点，以实现一个时尚的数据卡，显示当前鼠标突出显示的图形中所选月份的详细信息。与前面的图表一样，数据卡将需要放置在当前突出显示的月份旁边——即使页面滚动以查看所选月份。你将需要最大限度地利用额外的气候细节的满分，它必须以专业的方式呈现。当鼠标不在图表上时，你需要用卡做一些事情(即改变默认文本，从图中选择一个月来查看详细信息)，或者显示当年的年度统计数据。

　　Web应用程序

　　已经为您创建了包含必要的数据库和Web API Web服务的Web应用程序。这可以从课程网站上的“评估”选项卡下载。您的任务是完成必要的布局、图形和jQuery或D3V5/JavaScript代码完成视图/气候/ Index.cshtml和视图/气候/细节页面。

　　每页一张

　　可以用于需要使用javascript添加新布局元素的位置。如果您想使用d3，那么您需要链接到页面上的v5库，并且您还可以选择从水平条形图(从左到右)切换到柱形图(从下到上)。这包括围绕轴交换(如果使用d3!)是的。

　　Web服务

　　一旦你的图形结构被配置并决定了JavaScript库的使用(jQuery与D3V5)，建议你开始创建一个Ajax调用到站点控制器Web服务，并将数据下载到页面。Web服务的相对URL是“/API/Stand”。因此，如果在vs2017中运行应用程序，并且根url显示为：http://localhost:55968/then

　　http://LoalHoal:55968 /API/Stand将把AJAX JSON数据返回到站点列表中。这可能在visual studio中打开，在这种情况下，可以使用ctrl+k+d将其自动格式化为传统的json样式：

　　(23000)“站牌”：“2000”，“年份”：2018，“记录”：“6338”，“6338”，{“站号”：“小贩”，“年份”：2000，“to年”：2018，“记录”：6668，“失踪”：30，{“站号”：23013，“站牌”：“PARAFEFELD”，“年份”：2000，“toYAY”：2018，“记录”：“，”失踪(Y})

　　下一步是研究如何读取和循环数据。文件夹中有三个JSON文件，显示了正确格式化的数据，以便可以通过缩进看到数组和对象。使用这些文件帮助您编写jquery/d3v5代码。您甚至可能希望编写ajax请求，以便在测试期间使用这些文件加快速度。如果这样做，请记住将其交换回api请求。

　　一旦开始工作，就开始创建html元素并在将它们附加到页面之前为它们分配数据。

　　一旦你的工作站工作了，点击一个工作站就可以导航到下一个Web API：

　　调用这个API将给您提供与该站2000年以来的最高气温和最低气温相关的数据。您需要在任务2中描述的交互式图表上绘制这些内容。

　　javascript代写(jquery或d3)

　　任务是单独完成的，每个人都必须编写自己的javascript代写代码，其中包括执行上述任务的ajax请求。如前所述，您可以使用jquery或d3v5来实现各种任务。其他版本的D3(例如V3或V4)将不会接收任何标记。

　　CSS

　　杆的样式和轴的布局可以在必要时使用嵌入的样式元素在页面顶部完成，或者最好是外部样式表。酒吧的确切间距并不重要，但图表必须看起来专业：干净，整洁和可读性。棒材中的统计信息和计数应与边界隔开，以便于读取。棒的年/月标记应该与棒充分间隔，以便不溢出到图表上。样式类的数量应保持在最小值，除非在鼠标悬停或动画时需要作为视觉反馈的一部分。在类名中使用数据和使用id将招致惩罚。

　　标记

　　评分将在第13周的课堂上进行。你将需要能够证明你的工作，并回答任何问题，以获得及格分数。无法解释代码会导致减少或没有标记。

　　将在以下领域分配标记：

　　站点表和一般页面布局〔20%〕

　　这包括：

　　·正确的表格结构

　　·正确使用引导类。

　　·用于生成表的jQuery /D3V5代码的质量——包括适当的逻辑注释。

　　·演示和基本CSS -自定义(您自己的CSS)/改进的现有CSS

　　·超时和错误函数

　　站年度气候数据图〔40%〕

　　·ajax调用webapi以获取正确的数据

　　·使用jQuery /D3V5创建HTML元素，包括将数据和CSS类合并到新的HTML元素中

　　·在适当的情况下使用引导类

　　·在长字符串和连接上使用jquery函数

　　·将数据追加到现有数据div中。

　　·在图表中突出显示条形图和年份的代码

　　·图形布局的质量和可读性。

　　·数据着色

　　·条形图动画

　　站月气候数据图〔30%〕

　　·ajax调用webapi以获取正确的数据

　　·使用jQuery /D3V5创建HTML元素，包括将数据和CSS类合并到新的HTML元素中

　　·在适当的情况下使用引导类

　　·在长字符串和连接上使用jquery函数

　　·设置移除年度图表的动画

　　·动画替换月度图的入口

　　·将数据追加到现有数据div中。

　　·在图表中突出显示条形图和月份的代码

　　·按钮重新绘制选定站点的年度图表

　　·图形布局的质量和可读性。

　　·数据着色

　　·条形图动画

　　代码质量[10%]

　　·HTML验证-生成的HTML有效吗?

　　·优化jQuery和数据消耗

　　·html结构、类名、数据属性、索引信息和foreach循环的策略性使用。

　　·属性的重用。

　　奖励分数[高达30%]

　　奖金标准除了标准的标记之外，只有在你的代码被亲自解释时才能被授予。除了要求之外，这些将在标记的自由裁量权授予。不需要加分来达到满分。

　　·这些在作业的每个部分都有详细说明。