Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2022, 11:20
Интересующийся
Отправить личное сообщение для orloff Посмотреть профиль Найти все сообщения от orloff
 
Регистрация: 30.10.2020
Сообщений: 14

Шкала графика на ваниле JS
Всем привет.
Делаю подобие графика горизонтальных баров.
Нужна шкала X всегда от 0 до max. отрицательных и дробей не будет.
Работать должно как на chart.js
https://www.chartjs.org/docs/latest/...ntal-bar-chart
в data можно менять в live режиме.

Пример если max ==:
max == 5 тогда шкала будет такая - 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5
max == 65 - 0, 10, 20, 30, 40, 50, 60, 70
max == 379 - 0, 50, 100, 150, 200, 250, 300, 350, 400
max == 3469580 - 0, 500000, 1000000, 1500000, 2000000, 2500000, 3000000, 3500000
и т.д.

Набросал код для этого, вроде бы все работает, но есть вопрос - может можно сделать как то более скиловее, но что бы читабельно

function test(num) {
		const step3 = Math.pow(10, String(Math.round(num)).length - 1);
		let step = 0;
		const c = num / step3;
		if (c > 0 && c <= 1) {
			step = 0.1;
		} else if (c > 1 && c <= 2) {
			step = 0.2;
		} else if (c > 2 && c <= 5) {
			step = 0.5;
		} else if (c > 5 && c < 10) {
			step = 1;
		} else {
			step = 2;
		}
		const arr = [0];
		let count = 0;
		while (count < num) {
			count += step * step3;
			arr.push(count);
		}
		console.log(arr);
		alert(arr.join(', '))
	}
	test(3469580);
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2022, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

orloff,
function d(num) {
            let arr = [...num.toString()];
            let len = arr.length - 2;
            let k = +arr[0] > 5 ? 10 : 5;
            k *= Math.pow(10, len);
            num = Math.ceil(num/k) * k;
            arr = [];
            for (let i = 0; i <= num; i += k) arr.push(i);
            return arr;
        }
        console.log(5,d(5));
        console.log(65,d(65));
        console.log(379,d(379));
        console.log(3469580,d(3469580));

Последний раз редактировалось рони, 15.07.2022 в 13:37.
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2022, 13:42
Интересующийся
Отправить личное сообщение для orloff Посмотреть профиль Найти все сообщения от orloff
 
Регистрация: 30.10.2020
Сообщений: 14

рони,
Спасибо, но немного некорректно работает.
Не разбивает на 2, 20, 200 и т.д но это не принципиально, хотя детализация в плюс
И не дописывает последнее значение, например если значение 16 то последнее будет 15, или 172 то 150
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2022, 13:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

orloff,
вероятно вы смотрите устаревший вариант, обновите страницу и проверьте снова
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2022, 14:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

orloff,
что не так?
2: [0,0.5,1,1.5,2]
20: [0,5,10,15,20]
200: [0,50,100,150,200]
16: [0,5,10,15,20]
5: [0,0.5,1,1.5,2,2.5,3,3.5,4,4.5,5]
65: [0,10,20,30,40,50,60,70]
379: [0,50,100,150,200,250,300,350,400]
3469580: [0,500000,1000000,1500000,2000000,2500000,3000000,3 500000]
172: [0,50,100,150,200]
Ответить с цитированием
  #6 (permalink)  
Старый 15.07.2022, 14:23
Интересующийся
Отправить личное сообщение для orloff Посмотреть профиль Найти все сообщения от orloff
 
Регистрация: 30.10.2020
Сообщений: 14

рони,
Да была старая версия, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57
Вакансия JavaScript разработчик / JS / Frontend developer (Санкт-Петербург) Сергей Грачёв Работа 0 21.09.2015 12:31
Графика и JS - как изменить контрастность? Veterinar Элементы интерфейса 6 01.03.2014 18:01
Подгрузка JS + ajax... afr0 AJAX и COMET 8 10.04.2013 14:38