4.3 KiB
4.3 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7168d8c242eddfaeb5bd13 | Visualize Data with a Bar Chart | true | 3 | 使用条形图可视化数据 |
Description
id="title"
。 用户故事#2:我的图表应该有一个g
元素x轴,对应的id="x-axis"
。 用户故事#3:我的图表应该有一个g
元素y轴,对应的id="y-axis"
。 用户故事#4:两个轴应包含多个刻度标签,每个刻度标签对应的class="tick"
。 用户故事#5:我的图表应该为每个数据点都有一个rect
元素,相应的class="bar"
显示数据。 用户故事#6:每个栏应具有包含日期和GDP值的属性data-date
和data-gdp
。 用户故事#7:条形元素的data-date
属性应与提供的数据的顺序相匹配。 用户故事#8:条形元素的data-gdp
属性应与提供的数据的顺序相匹配。 用户故事#9:每个条形元素的高度应准确地表示数据的相应GDP。 用户故事#10: data-date
属性及其对应的bar元素应与x轴上的对应值对齐。 用户故事#11: data-gdp
属性及其对应的bar元素应与y轴上的对应值对齐。 用户故事#12:我可以将鼠标悬停在一个区域上,并查看带有相应id="tooltip"
,其中显示有关该区域的更多信息。 用户故事#13:我的工具提示应该有一个data-date
属性,该属性对应于活动区域的data-date
。以下是完成此项目所需的数据集: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
: //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
。完成后,将URL提交到工作项目,并传递所有测试。如果卡住,请记住使用Read-Search-Ask方法。 Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required