123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- /* Есть массив чисел:
- [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);
- });
|