6.3 KiB
6.3 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7168d8c242eddfaeb5bd13 | Visualize Data with a Bar Chart | true | 3 | Визуализация данных с помощью диаграммы |
Description
id="title"
. История пользователя # 2: Моя диаграмма должна иметь g
элемент оси х с соответствующим id="x-axis"
. User Story # 3: Моя диаграмма должна иметь ось y элемента g
с соответствующим id="y-axis"
. User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick"
. User Story # 5: Моя диаграмма должна иметь rect
элемент для каждой точки данных с соответствующим class="bar"
отображающим данные. User Story # 6: В каждом баре должны быть data-date
и data-gdp
содержащие значения даты и ВВП. User Story # 7: свойства data-date
бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp
элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp
и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip"
которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date
, соответствующее data-date
данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождением тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required