Sākums Izpētīt Palīdzība
Pierakstīties
serg1557733
/
charArray
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

bar from array

serg155alternate 3 gadi atpakaļ
revīzija
d96522232f
4 mainītis faili ar 102 papildinājumiem un 0 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 6 0
      README.md
  2. 14 0
      index.html
  3. 45 0
      main.js
  4. 37 0
      style.css

+ 6 - 0
README.md
Parādīt failu 

@@ -0,0 +1,6 @@
 
+# barchartsfromArray
 
+Есть массив чисел: [5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13] 
+Вывести его в виде графика (bar charts), где по оси x - индекс элемента, по оси y - значение. 
+Сделать цветовую градацию показателей на графике: 0 - 5 зеленый, 6 - 10 желтый, свыше 10 красный.
 
+Допускается использование только html, css, javascript. Использование сторонних библиотек, canvas, svg не допускается.
 
+![image](https://user-images.githubusercontent.com/72445490/137629013-650e592c-f5b9-455f-a858-f886f6c08186.png)

+ 14 - 0
index.html
Parādīt failu 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    <div class="root"></div>
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 45 - 0
main.js
Parādīt failu 

@@ -0,0 +1,45 @@
 
+
 
+/* Есть массив чисел:
 
+[5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13]
 
+Вывести его в виде графика (bar charts), где по оси x - 
+индекс элемента, по оси y - значение. 
+Сделать цветовую градацию показателей на графике: 0 - 5 зеленый, 6 - 10 желтый, свыше 10 красный.
 
+ Допускается использование только html, css, javascript. Использование сторонних библиотек, canvas, svg не допускается. */
 
+
 
+const array = [5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13],
 
+        root = document.querySelector('.root'),
 
+        axY = document.createElement('div');
 
+
 
+
 
+axY.classList.add('axY');
 
+axY.style.height = `${Math.max.apply(null, array) * 20}px`;
 
+root.append(axY);
 
+
 
+for (let i = 0; i <= Math.max.apply(null, array); i++){
 
+    yIndex = document.createElement('span');
 
+    yIndex.innerText = i;
 
+    axY.append(yIndex);
 
+}
 
+
 
+
 
+
 
+        
+array.map((item, index) => {
 
+     let div = document.createElement('div'),
 
+        xIndex = document.createElement('span'),
 
+        height = item * 20;
 
+     div.classList.add('bar');
 
+     xIndex.classList.add('line');
 
+     xIndex.innerText = index;
 
+     div.style.height = `${height}px`;
 
+     if (item > 0 && item < 5) {
 
+         div.style.backgroundColor = 'green';
 
+     } else if (item >= 5 && item <= 10){
 
+        div.style.backgroundColor = 'yellow';
 
+    } else if (item > 10){
 
+        div.style.backgroundColor = 'red';
 
+    }
 
+    
+     root.append(xIndex);
 
+     root.append(div);
 
+});

+ 37 - 0
style.css
Parādīt failu 

@@ -0,0 +1,37 @@
 
+.root {
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: flex-end;
 
+    margin-top: 20px;  
+}
 
+.axY {
 
+    display: flex;
 
+    position: relative;
 
+    flex-direction: column-reverse;
 
+    align-items: flex-end;
 
+    width: 1px;
 
+    background-color:black;
 
+}
 
+.axY span {
 
+    margin-right: 5px;
 
+    margin-bottom: 1px;
 
+}
 
+.axY span::after {
 
+    position: absolute;
 
+    content:'';
 
+    width: 5px;
 
+    height: 5px;
 
+    border-radius: 100%;
 
+    left: -2px;
 
+    background-color: rgb(5, 3, 3);
 
+}
 
+.bar {
 
+    width: 20px;
 
+    border:1px solid black;
 
+    margin-left: 1px;
 
+}
 
+.line {
 
+    height: 0;
 
+    width: 0;
 
+    
+}