Кто знает JavaScript. Помогите!!!

На этом форуме Вы можете задать вопросы знатокам программы и автору.
Ответить
Аватара пользователя
Serquick
Сержант
Сообщения: 254
Зарегистрирован: 25.11.2019{, 01:07}
Репутация: 46
Откуда: Украина
Имя: Сергей

Кто знает JavaScript. Помогите!!!

#1

Сообщение Serquick » 10.11.2020{, 22:03}

Всем Hi :)
Собрал такой график

Код: Выделить всё

<html>
  </head>
	<style type="text/css">
.go-to-realtime-button {
	width: 27px;
	height: 27px;
	position: absolute;
	display: none;
	padding: 7px;
	box-sizing: border-box;
	font-size: 10px;
	border-radius: 50%;
	text-align: center;
	z-index: 2;
	color: #B2B5BE;
	background: rgba(250, 250, 250, 0.95);
	box-shadow: 0 2px 5px 0 rgba(117, 134, 150, 0.45);
}

.legend3 {
	position: absolute;
	left: 265px;
	top: 20px;
	z-index: 3;
	color: rgba(234, 255, 0, 1);
  font-size: 18px;
	line-height: 18px;
	font-weight: 998;
}


.legend2 {
	position: absolute;
	left: 12px;
	top: 30px;
	z-index: 4;
	color: rgba(255, 0, 43, 1);
  font-size: 18px;
	line-height: 18px;
	font-weight: 900;
}
.legend {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	color: rgba(255, 255, 255, 1);
  font-size: 18px;
	line-height: 18px;
	font-weight: 900;
}
     </style>
<body>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<head>
    <script>
document.body.style.position = 'relative';

var container = document.createElement('div');
document.body.appendChild(container);

var chartWidth = 600;
var chartHeight = 300;

var chart = LightweightCharts.createChart(container, {
	width: chartWidth,
	height: chartHeight,
	rightPriceScale: {
		scaleMargins: {
			top: 0.2,
			bottom: 0.1,
		},
	},
  localization: {
        dateFormat: 'yyyy MMMM dd',
    },
  layout: {
		backgroundColor: '#000',
		textColor: '#d1d4dc',
	},
	grid: {
		vertLines: {
			visible: false,
		},
		horzLines: {
			color: 'rgba(42, 46, 57, 0.5)',
		},
	},
	timeScale: {
		timeVisible: true,
    rightOffset: 2,
	},
});

 var lineSeries = chart.addAreaSeries({
  topColor: 'rgba(21, 101, 192, 0)',
  bottomColor: 'rgba(21, 101, 192, 0)',
  lineColor: 'rgba(255, 0, 43, 1)',
  lineWidth: 5,
  });
 
 lineSeries.setData([
	{ time: 1556877600, value: 24 },
	{ time: 1556881200, value: 24 },
	{ time: 1556884800, value: 25 },
	{ time: 1556888400, value: 24 },
	{ time: 1556892000, value: 24 },
	{ time: 1556895600, value: 25 },
	{ time: 1557126000, value: 25 },
	{ time: 1557129600, value: 26 },
	{ time: 1557133200, value: 24 },
	{ time: 1557136800, value: 24 },
	{ time: 1557140400, value: 24 },
	{ time: 1557144000, value: 24 },
	{ time: 1557147600, value: 24 },
	{ time: 1557151200, value: 24 },
	{ time: 1557154800, value: 24 },
	{ time: 1557212400, value: 23 },
	{ time: 1557216000, value: 26 },
	{ time: 1557219600, value: 23 },
	{ time: 1557223200, value: 23 },
	{ time: 1557226800, value: 23 },
	{ time: 1557230400, value: 23 },
	{ time: 1557234000, value: 23 },
	{ time: 1557237600, value: 23 },
	{ time: 1557241200, value: 23 },
	{ time: 1557298800, value: 23 },
	{ time: 1557302400, value: 23 },
	{ time: 1557306000, value: 22 },
	{ time: 1557309600, value: 22 },
	{ time: 1557313200, value: 23 },
	{ time: 1557316800, value: 23 },
	{ time: 1557320400, value: 23 },
	{ time: 1557324000, value: 23 },
	{ time: 1557327600, value: 23 },
	{ time: 1557471600, value: 22 },
	{ time: 1557475200, value: 22 },
	{ time: 1557478800, value: 22 },
	{ time: 1557482400, value: 22 },
	{ time: 1557486000, value: 22 },
	{ time: 1557489600, value: 22 },
	{ time: 1557493200, value: 22 },
	{ time: 1557496800, value: 22 },
	{ time: 1557500400, value: 22 },
	{ time: 1557730800, value: 22 },
	{ time: 1557734400, value: 22 },
	{ time: 1557738000, value: 22 },
	{ time: 1557741600, value: 22 },
	{ time: 1557745200, value: 22 },
	{ time: 1557748800, value: 22 },
	{ time: 1557752400, value: 22 },
	{ time: 1557756000, value: 22 },
	{ time: 1557759600, value: 22 },
	{ time: 1557817200, value: 22 },
	{ time: 1557820800, value: 22 },
	{ time: 1557824400, value: 22 },
	{ time: 1557828000, value: 22 },
	{ time: 1557831600, value: 22 },
	{ time: 1557835200, value: 22 },
	{ time: 1557838800, value: 22 },
	{ time: 1557842400, value: 22 },
	{ time: 1557846000, value: 22 },
	{ time: 1557903600, value: 22 },
	{ time: 1557907200, value: 22 },
	{ time: 1557910800, value: 22 },
	{ time: 1557914400, value: 22 },
	{ time: 1557918000, value: 22 },
	{ time: 1557921600, value: 22 },
	{ time: 1557925200, value: 22 },
	{ time: 1557928800, value: 22 },
	{ time: 1557932400, value: 22 },
	{ time: 1557990000, value: 23 },
	{ time: 1557993600, value: 23 },
	{ time: 1557997200, value: 22 },
	{ time: 1558000800, value: 22 },
	{ time: 1558004400, value: 22 },
	{ time: 1558008000, value: 22 },
	{ time: 1558011600, value: 22 },
	{ time: 1558015200, value: 22 },
	{ time: 1558018800, value: 22 },
	{ time: 1558076400, value: 22 },
	{ time: 1558080000, value: 22 },
	{ time: 1558083600, value: 22 },
	{ time: 1558087200, value: 22 },
	{ time: 1558090800, value: 22 },
	{ time: 1558094400, value: 22 },
	{ time: 1558098000, value: 22 },
	{ time: 1558101600, value: 22 },
	{ time: 1558105200, value: 22 },
	{ time: 1558335600, value: 22 },
	{ time: 1558339200, value: 22 },
	{ time: 1558342800, value: 22 },
	{ time: 1558346400, value: 22 },
	{ time: 1558350000, value: 22 },
	{ time: 1558353600, value: 22 },
	{ time: 1558357200, value: 22 },
	{ time: 1558360800, value: 22 },
	{ time: 1558364400, value: 22 },
	{ time: 1558422000, value: 22 },
	{ time: 1558425600, value: 22 },
	{ time: 1558429200, value: 22 },
	{ time: 1558432800, value: 22 },
	{ time: 1558436400, value: 22 },
	{ time: 1558440000, value: 22 },
	{ time: 1558443600, value: 22 },
	{ time: 1558447200, value: 23 },
	{ time: 1558450800, value: 23 },
	{ time: 1558508400, value: 23 },
	{ time: 1558512000, value: 23 },
	{ time: 1558515600, value: 23 },
	{ time: 1558519200, value: 23 },
	{ time: 1558522800, value: 23 },
	{ time: 1558526400, value: 23 },
	{ time: 1558530000, value: 23 },
	{ time: 1558533600, value: 23 },
	{ time: 1558537200, value: 23 },
	{ time: 1558594800, value: 23 },
	{ time: 1558598400, value: 23 },
	{ time: 1558602000, value: 23 },
	{ time: 1558605600, value: 23 },
	{ time: 1558609200, value: 23 },
	{ time: 1558612800, value: 23 },
	{ time: 1558616400, value: 23 },
	{ time: 1558620000, value: 22 },
	{ time: 1558623600, value: 22 },
	{ time: 1558681200, value: 23 },
	{ time: 1558684800, value: 23 },
	{ time: 1558688400, value: 23 },
	{ time: 1558692000, value: 23 },
	{ time: 1558695600, value: 23 },
	{ time: 1558699200, value: 23 },
	{ time: 1558702800, value: 23 },
	{ time: 1558706400, value: 23 },
	{ time: 1558710000, value: 23 },
	{ time: 1558940400, value: 23 },
	{ time: 1558944000, value: 23 },
	{ time: 1558947600, value: 23 },
	{ time: 1558951200, value: 23 },
	{ time: 1558954800, value: 23 },
	{ time: 1558958400, value: 23 },
	{ time: 1558962000, value: 23 },
	{ time: 1558965600, value: 23 },
	{ time: 1558969200, value: 23 },
	{ time: 1559026800, value: 23 },
	{ time: 1559030400, value: 23 },
	{ time: 1559034000, value: 23 },
	{ time: 1559037600, value: 25 },
	{ time: 1559041200, value: 25 },
	{ time: 1559044800, value: 25 },
	{ time: 1559048400, value: 25 },
	{ time: 1559052000, value: 25 },
	{ time: 1559055600, value: 26 },
]);

 
 lineSeries.applyOptions({
    priceLineVisible: false,
  	lastValueVisible: false,
  	priceFormat: {
     type: 'custom',
     minMove: 1,
	  formatter: price => price.toFixed(0) + 'C°',
   		 },
 });
 

var areaSeries = chart.addAreaSeries({
  topColor: 'rgba(21, 101, 192, 0.5)',
  bottomColor: 'rgba(21, 101, 192, 0.5)',
  lineColor: 'rgba(255, 255, 255,1)',
  lineWidth: 5,
});

areaSeries.setData([
  { time: 1556877600, value: 23 },
	{ time: 1556881200, value: 23 },
	{ time: 1556884800, value: 23 },
	{ time: 1556888400, value: 23 },
	{ time: 1556892000, value: 23 },
	{ time: 1556895600, value: 23 },
	{ time: 1557126000, value: 22 },
	{ time: 1557129600, value: 22 },
	{ time: 1557133200, value: 22 },
	{ time: 1557136800, value: 22 },
	{ time: 1557140400, value: 22 },
	{ time: 1557144000, value: 22 },
	{ time: 1557147600, value: 23 },
	{ time: 1557151200, value: 23 },
	{ time: 1557154800, value: 23 },
	{ time: 1557212400, value: 23 },
	{ time: 1557216000, value: 23 },
	{ time: 1557219600, value: 23 },
	{ time: 1557223200, value: 23 },
	{ time: 1557226800, value: 23 },
	{ time: 1557230400, value: 23 },
	{ time: 1557234000, value: 23 },
	{ time: 1557237600, value: 23 },
	{ time: 1557241200, value: 23 },
	{ time: 1557298800, value: 23 },
	{ time: 1557302400, value: 23 },
	{ time: 1557306000, value: 22 },
	{ time: 1557309600, value: 22 },
	{ time: 1557313200, value: 23 },
	{ time: 1557316800, value: 23 },
	{ time: 1557320400, value: 23 },
	{ time: 1557324000, value: 23 },
	{ time: 1557327600, value: 23 },
	{ time: 1557471600, value: 22 },
	{ time: 1557475200, value: 22 },
	{ time: 1557478800, value: 22 },
	{ time: 1557482400, value: 22 },
	{ time: 1557486000, value: 22 },
	{ time: 1557489600, value: 22 },
	{ time: 1557493200, value: 22 },
	{ time: 1557496800, value: 22 },
	{ time: 1557500400, value: 22 },
	{ time: 1557730800, value: 22 },
	{ time: 1557734400, value: 22 },
	{ time: 1557738000, value: 22 },
	{ time: 1557741600, value: 22 },
	{ time: 1557745200, value: 22 },
	{ time: 1557748800, value: 22 },
	{ time: 1557752400, value: 22 },
	{ time: 1557756000, value: 22 },
	{ time: 1557759600, value: 22 },
	{ time: 1557817200, value: 22 },
	{ time: 1557820800, value: 22 },
	{ time: 1557824400, value: 22 },
	{ time: 1557828000, value: 22 },
	{ time: 1557831600, value: 22 },
	{ time: 1557835200, value: 22 },
	{ time: 1557838800, value: 22 },
	{ time: 1557842400, value: 22 },
	{ time: 1557846000, value: 22 },
	{ time: 1557903600, value: 22 },
	{ time: 1557907200, value: 22 },
	{ time: 1557910800, value: 22 },
	{ time: 1557914400, value: 22 },
	{ time: 1557918000, value: 22 },
	{ time: 1557921600, value: 22 },
	{ time: 1557925200, value: 22 },
	{ time: 1557928800, value: 22 },
	{ time: 1557932400, value: 22 },
	{ time: 1557990000, value: 23 },
	{ time: 1557993600, value: 23 },
	{ time: 1557997200, value: 22 },
	{ time: 1558000800, value: 22 },
	{ time: 1558004400, value: 22 },
	{ time: 1558008000, value: 22 },
	{ time: 1558011600, value: 22 },
	{ time: 1558015200, value: 22 },
	{ time: 1558018800, value: 22 },
	{ time: 1558076400, value: 22 },
	{ time: 1558080000, value: 22 },
	{ time: 1558083600, value: 22 },
	{ time: 1558087200, value: 22 },
	{ time: 1558090800, value: 22 },
	{ time: 1558094400, value: 22 },
	{ time: 1558098000, value: 22 },
	{ time: 1558101600, value: 22 },
	{ time: 1558105200, value: 22 },
	{ time: 1558335600, value: 22 },
	{ time: 1558339200, value: 22 },
	{ time: 1558342800, value: 22 },
	{ time: 1558346400, value: 22 },
	{ time: 1558350000, value: 22 },
	{ time: 1558353600, value: 22 },
	{ time: 1558357200, value: 22 },
	{ time: 1558360800, value: 22 },
	{ time: 1558364400, value: 22 },
	{ time: 1558422000, value: 22 },
	{ time: 1558425600, value: 22 },
	{ time: 1558429200, value: 22 },
	{ time: 1558432800, value: 22 },
	{ time: 1558436400, value: 22 },
	{ time: 1558440000, value: 22 },
	{ time: 1558443600, value: 22 },
	{ time: 1558447200, value: 23 },
	{ time: 1558450800, value: 23 },
	{ time: 1558508400, value: 23 },
	{ time: 1558512000, value: 23 },
	{ time: 1558515600, value: 23 },
	{ time: 1558519200, value: 23 },
	{ time: 1558522800, value: 23 },
	{ time: 1558526400, value: 23 },
	{ time: 1558530000, value: 23 },
	{ time: 1558533600, value: 23 },
	{ time: 1558537200, value: 23 },
	{ time: 1558594800, value: 23 },
	{ time: 1558598400, value: 23 },
	{ time: 1558602000, value: 23 },
	{ time: 1558605600, value: 23 },
	{ time: 1558609200, value: 23 },
	{ time: 1558612800, value: 23 },
	{ time: 1558616400, value: 23 },
	{ time: 1558620000, value: 22 },
	{ time: 1558623600, value: 22 },
	{ time: 1558681200, value: 23 },
	{ time: 1558684800, value: 23 },
	{ time: 1558688400, value: 23 },
	{ time: 1558692000, value: 23 },
	{ time: 1558695600, value: 23 },
	{ time: 1558699200, value: 23 },
	{ time: 1558702800, value: 23 },
	{ time: 1558706400, value: 23 },
	{ time: 1558710000, value: 23 },
	{ time: 1558940400, value: 23 },
	{ time: 1558944000, value: 23 },
	{ time: 1558947600, value: 23 },
	{ time: 1558951200, value: 23 },
	{ time: 1558954800, value: 23 },
	{ time: 1558958400, value: 23 },
	{ time: 1558962000, value: 23 },
	{ time: 1558965600, value: 23 },
	{ time: 1558969200, value: 23 },
	{ time: 1559026800, value: 23 },
	{ time: 1559030400, value: 23 },
	{ time: 1559034000, value: 23 },
	{ time: 1559037600, value: 23 },
	{ time: 1559041200, value: 23 },
	{ time: 1559044800, value: 23 },
	{ time: 1559048400, value: 23 },
	{ time: 1559052000, value: 23 },
	{ time: 1559055600, value: 23 },
]);

areaSeries.applyOptions({
    priceLineVisible: false,
  	lastValueVisible: false,
  	priceFormat: {
     type: 'custom',
     minMove: 1,
	  formatter: price => price.toFixed(0) + 'C°',
   		 },
 });
 

chart.timeScale().scrollToPosition(0, false);

var width = 27;
var height = 27;

var button = document.createElement('div');
button.className = 'go-to-realtime-button';
button.style.left = (chartWidth - width - 60) + 'px';
button.style.top = (chartHeight - height - 30) + 'px';
button.style.color = '#4c525e';
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6.5 1.5l5 5.5-5 5.5M3 4l2.5 3L3 10"></path></svg>';
document.body.appendChild(button);

var timeScale = chart.timeScale();
timeScale.subscribeVisibleTimeRangeChange(function() {
	var buttonVisible = timeScale.scrollPosition() < 0;
	button.style.display = buttonVisible ? 'block' : 'none';
});

button.addEventListener('click', function() {
	timeScale.scrollToRealTime();
});

button.addEventListener('mouseover', function() {
	button.style.background = 'rgba(250, 250, 250, 1)';
	button.style.color = '#000';
});

button.addEventListener('mouseout', function() {
	button.style.background = 'rgba(250, 250, 250, 0.6)';
	button.style.color = '#4c525e';
});

var legend = document.createElement('div');
legend.classList.add('legend');
document.body.appendChild(legend);

var firstRow = document.createElement('div');
legend.appendChild(firstRow);

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
	  const price = param.seriesPrices.get(areaSeries);
		const mDate = new Date (param.time * 1000 ).toISOString().substr(0, 10);
    const Time = new Date (param.time * 1000 ).toISOString().substr(11, 8);
		   
    firstRow.innerText = mDate + ' | ' + Time + ' —' + '  ' + price.toFixed(0) + 'C°';
    bas = Number.parseInt(price.toFixed(0));
	} 
  else {
  	firstRow.innerText = '';
  }
});

var legend2 = document.createElement('div');
legend2.classList.add('legend2');
document.body.appendChild(legend2);

var firstRow2 = document.createElement('div');
legend2.appendChild(firstRow2);

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
	  const price = param.seriesPrices.get(lineSeries);
		const mDate = new Date (param.time * 1000 ).toISOString().substr(0, 10);
    const Time = new Date (param.time * 1000 ).toISOString().substr(11, 8);
		   
    firstRow2.innerText = mDate + ' | ' + Time + ' —' + '  ' + price.toFixed(0) + 'C°';
   ulica = Number.parseInt(price.toFixed(0));
	} 
  else {
  	firstRow2.innerText = '';
  }
});

var legend3 = document.createElement('div');
legend3.classList.add('legend3');
document.body.appendChild(legend3);

var firstRow3 = document.createElement('div');
legend3.appendChild(firstRow3);

function pad(n) {
	var s = ('0' + n);
	return s.substr(s.length - 2);
}

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
		
    firstRow3.innerText = Math.abs(ulica - bas) + 'C°';
		  }
  else {
  	firstRow3.innerText = '';
  }
});

    </script>
  </body>
</html>
Как реализовать через "Метод filter()" или другой метод, возможность выбора по дате: например с 2019.05.03 по 2019.05.10 :smile37:
В общем как обработать массив?
32 Кб должно хватить для любых задач!!!
Вернуться к началу
Аватара пользователя
Sancho
Полковник
Сообщения: 4066
Зарегистрирован: 25.12.2015{, 17:32}
Репутация: 590
Откуда: Ярославль.
Имя: Александр
Контактная информация:
Контактная информация пользователя Sancho

Кто знает JavaScript. Помогите!!!

#2

Сообщение Sancho » 11.11.2020{, 08:44}

Serquick, Для Малинки, node-red, пользуюсь учебником, в котором есть эта часть.
Возможно поможет. Вроде всё понятно описано.
Но я у Вас видел только функцию с массивом, две. 102 и 274.
мой ник в нете и почте omelchuk890, если что. запомните на всякий. многие знают номер тлф.
Вернуться к началу
Аватара пользователя
Serquick
Сержант
Сообщения: 254
Зарегистрирован: 25.11.2019{, 01:07}
Репутация: 46
Откуда: Украина
Имя: Сергей

Кто знает JavaScript. Помогите!!!

#3

Сообщение Serquick » 11.11.2020{, 10:23}

Sancho Спасибо. Я тоже пользуюсь этим учебником https://developer.mozilla.org/ru/docs/W ... rray/slice. :D Поковырял и вот что получилось

Код: Выделить всё

document.body.style.position = 'relative';

var container = document.createElement('div');
document.body.appendChild(container);

var chartWidth = 600;
var chartHeight = 300;

var chart = LightweightCharts.createChart(container, {
	width: chartWidth,
	height: chartHeight,
	rightPriceScale: {
		scaleMargins: {
			top: 0.2,
			bottom: 0.1,
		},
	},
  localization: {
        dateFormat: 'yyyy MMMM dd',
    },
  layout: {
		backgroundColor: '#000',
		textColor: '#d1d4dc',
	},
	grid: {
		vertLines: {
			visible: false,
		},
		horzLines: {
			color: 'rgba(42, 46, 57, 0.5)',
		},
	},
	timeScale: {
		timeVisible: true,
    rightOffset: 2,
	},
});

let myArrayRed = [
 	{ time: 1556877600, value: 24 },
	{ time: 1556881200, value: 24 },
	{ time: 1556884800, value: 24 },
	{ time: 1556888400, value: 24 },
	{ time: 1556892000, value: 24 },
	{ time: 1556895600, value: 25 },
	{ time: 1557126000, value: 25 },
	{ time: 1557129600, value: 25 },
	{ time: 1557133200, value: 25 },
	{ time: 1557136800, value: 25 },
	{ time: 1557140400, value: 25 },
	{ time: 1557144000, value: 24 },
	{ time: 1557147600, value: 24 },
	{ time: 1557151200, value: 24 },
	{ time: 1557154800, value: 24 },
	{ time: 1557212400, value: 25 },
	{ time: 1557216000, value: 25 },
	{ time: 1557219600, value: 25 },
	{ time: 1557223200, value: 25 },
	{ time: 1557226800, value: 25 },
	{ time: 1557230400, value: 26 },
	{ time: 1557234000, value: 26 },
	{ time: 1557237600, value: 26 },
	{ time: 1557241200, value: 26 },
	{ time: 1557298800, value: 26 },
	{ time: 1557302400, value: 26 },
	{ time: 1557306000, value: 26 },
	{ time: 1557309600, value: 26 },
	{ time: 1557313200, value: 25 },
	{ time: 1557316800, value: 25 },
	{ time: 1557320400, value: 25 },
	{ time: 1557324000, value: 23 },
	{ time: 1557327600, value: 23 },
	{ time: 1557471600, value: 22 },
	{ time: 1557475200, value: 22 },
	{ time: 1557478800, value: 22 },
	{ time: 1557482400, value: 22 },
	{ time: 1557486000, value: 22 },
	{ time: 1557489600, value: 22 },
	{ time: 1557493200, value: 22 },
	{ time: 1557496800, value: 22 },
	{ time: 1557500400, value: 22 },
	{ time: 1557730800, value: 22 },
	{ time: 1557734400, value: 22 },
	{ time: 1557738000, value: 22 },
	{ time: 1557741600, value: 22 },
	{ time: 1557745200, value: 22 },
	{ time: 1557748800, value: 22 },
	{ time: 1557752400, value: 22 },
	{ time: 1557756000, value: 22 },
	{ time: 1557759600, value: 22 },
	{ time: 1557817200, value: 22 },
	{ time: 1557820800, value: 22 },
	{ time: 1557824400, value: 22 },
	{ time: 1557828000, value: 22 },
	{ time: 1557831600, value: 22 },
	{ time: 1557835200, value: 22 },
	{ time: 1557838800, value: 22 },
	{ time: 1557842400, value: 22 },
	{ time: 1557846000, value: 22 },
	{ time: 1557903600, value: 22 },
	{ time: 1557907200, value: 22 },
	{ time: 1557910800, value: 22 },
	{ time: 1557914400, value: 22 },
	{ time: 1557918000, value: 22 },
	{ time: 1557921600, value: 22 },
	{ time: 1557925200, value: 22 },
	{ time: 1557928800, value: 22 },
	{ time: 1557932400, value: 22 },
	{ time: 1557990000, value: 23 },
	{ time: 1557993600, value: 23 },
	{ time: 1557997200, value: 22 },
	{ time: 1558000800, value: 22 },
	{ time: 1558004400, value: 22 },
	{ time: 1558008000, value: 22 },
	{ time: 1558011600, value: 22 },
	{ time: 1558015200, value: 22 },
	{ time: 1558018800, value: 22 },
	{ time: 1558076400, value: 22 },
	{ time: 1558080000, value: 22 },
	{ time: 1558083600, value: 22 },
	{ time: 1558087200, value: 22 },
	{ time: 1558090800, value: 22 },
	{ time: 1558094400, value: 22 },
	{ time: 1558098000, value: 22 },
	{ time: 1558101600, value: 22 },
	{ time: 1558105200, value: 22 },
	{ time: 1558335600, value: 22 },
	{ time: 1558339200, value: 22 },
	{ time: 1558342800, value: 22 },
	{ time: 1558346400, value: 22 },
	{ time: 1558350000, value: 22 },
	{ time: 1558353600, value: 22 },
	{ time: 1558357200, value: 22 },
	{ time: 1558360800, value: 22 },
	{ time: 1558364400, value: 22 },
	{ time: 1558422000, value: 22 },
	{ time: 1558425600, value: 22 },
	{ time: 1558429200, value: 22 },
	{ time: 1558432800, value: 22 },
	{ time: 1558436400, value: 22 },
	{ time: 1558440000, value: 22 },
	{ time: 1558443600, value: 22 },
	{ time: 1558447200, value: 23 },
	{ time: 1558450800, value: 23 },
	{ time: 1558508400, value: 23 },
	{ time: 1558512000, value: 23 },
	{ time: 1558515600, value: 23 },
	{ time: 1558519200, value: 23 },
	{ time: 1558522800, value: 23 },
	{ time: 1558526400, value: 23 },
	{ time: 1558530000, value: 23 },
	{ time: 1558533600, value: 23 },
	{ time: 1558537200, value: 23 },
	{ time: 1558594800, value: 23 },
	{ time: 1558598400, value: 23 },
	{ time: 1558602000, value: 23 },
	{ time: 1558605600, value: 23 },
	{ time: 1558609200, value: 23 },
	{ time: 1558612800, value: 23 },
	{ time: 1558616400, value: 23 },
	{ time: 1558620000, value: 22 },
	{ time: 1558623600, value: 22 },
	{ time: 1558681200, value: 23 },
	{ time: 1558684800, value: 23 },
	{ time: 1558688400, value: 23 },
	{ time: 1558692000, value: 23 },
	{ time: 1558695600, value: 23 },
	{ time: 1558699200, value: 23 },
	{ time: 1558702800, value: 23 },
	{ time: 1558706400, value: 23 },
	{ time: 1558710000, value: 23 },
	{ time: 1558940400, value: 23 },
	{ time: 1558944000, value: 23 },
	{ time: 1558947600, value: 23 },
	{ time: 1558951200, value: 23 },
	{ time: 1558954800, value: 23 },
	{ time: 1558958400, value: 24 },
	{ time: 1558962000, value: 24 },
	{ time: 1558965600, value: 24 },
	{ time: 1558969200, value: 24 },
	{ time: 1559026800, value: 24 },
	{ time: 1559030400, value: 24 },
	{ time: 1559034000, value: 24 },
	{ time: 1559037600, value: 24 },
	{ time: 1559041200, value: 25 },
	{ time: 1559044800, value: 25 },
	{ time: 1559048400, value: 25 },
	{ time: 1559052000, value: 25 },
	{ time: 1559055600, value: 26 },
];

let myArrayBlue = [
  { time: 1556877600, value: 23 },
	{ time: 1556881200, value: 23 },
	{ time: 1556884800, value: 23 },
	{ time: 1556888400, value: 23 },
	{ time: 1556892000, value: 23 },
	{ time: 1556895600, value: 23 },
	{ time: 1557126000, value: 22 },
	{ time: 1557129600, value: 22 },
	{ time: 1557133200, value: 22 },
	{ time: 1557136800, value: 22 },
	{ time: 1557140400, value: 22 },
	{ time: 1557144000, value: 22 },
	{ time: 1557147600, value: 23 },
	{ time: 1557151200, value: 23 },
	{ time: 1557154800, value: 23 },
	{ time: 1557212400, value: 23 },
	{ time: 1557216000, value: 23 },
	{ time: 1557219600, value: 23 },
	{ time: 1557223200, value: 23 },
	{ time: 1557226800, value: 23 },
	{ time: 1557230400, value: 23 },
	{ time: 1557234000, value: 23 },
	{ time: 1557237600, value: 23 },
	{ time: 1557241200, value: 23 },
	{ time: 1557298800, value: 23 },
	{ time: 1557302400, value: 23 },
	{ time: 1557306000, value: 22 },
	{ time: 1557309600, value: 22 },
	{ time: 1557313200, value: 23 },
	{ time: 1557316800, value: 23 },
	{ time: 1557320400, value: 23 },
	{ time: 1557324000, value: 23 },
	{ time: 1557327600, value: 23 },
	{ time: 1557471600, value: 22 },
	{ time: 1557475200, value: 22 },
	{ time: 1557478800, value: 22 },
	{ time: 1557482400, value: 22 },
	{ time: 1557486000, value: 22 },
	{ time: 1557489600, value: 22 },
	{ time: 1557493200, value: 22 },
	{ time: 1557496800, value: 22 },
	{ time: 1557500400, value: 22 },
	{ time: 1557730800, value: 22 },
	{ time: 1557734400, value: 22 },
	{ time: 1557738000, value: 22 },
	{ time: 1557741600, value: 22 },
	{ time: 1557745200, value: 22 },
	{ time: 1557748800, value: 22 },
	{ time: 1557752400, value: 22 },
	{ time: 1557756000, value: 22 },
	{ time: 1557759600, value: 22 },
	{ time: 1557817200, value: 22 },
	{ time: 1557820800, value: 22 },
	{ time: 1557824400, value: 22 },
	{ time: 1557828000, value: 22 },
	{ time: 1557831600, value: 22 },
	{ time: 1557835200, value: 22 },
	{ time: 1557838800, value: 22 },
	{ time: 1557842400, value: 22 },
	{ time: 1557846000, value: 22 },
	{ time: 1557903600, value: 22 },
	{ time: 1557907200, value: 22 },
	{ time: 1557910800, value: 22 },
	{ time: 1557914400, value: 22 },
	{ time: 1557918000, value: 22 },
	{ time: 1557921600, value: 22 },
	{ time: 1557925200, value: 22 },
	{ time: 1557928800, value: 22 },
	{ time: 1557932400, value: 22 },
	{ time: 1557990000, value: 23 },
	{ time: 1557993600, value: 23 },
	{ time: 1557997200, value: 22 },
	{ time: 1558000800, value: 22 },
	{ time: 1558004400, value: 22 },
	{ time: 1558008000, value: 22 },
	{ time: 1558011600, value: 22 },
	{ time: 1558015200, value: 22 },
	{ time: 1558018800, value: 22 },
	{ time: 1558076400, value: 22 },
	{ time: 1558080000, value: 22 },
	{ time: 1558083600, value: 22 },
	{ time: 1558087200, value: 22 },
	{ time: 1558090800, value: 22 },
	{ time: 1558094400, value: 22 },
	{ time: 1558098000, value: 22 },
	{ time: 1558101600, value: 22 },
	{ time: 1558105200, value: 22 },
	{ time: 1558335600, value: 22 },
	{ time: 1558339200, value: 22 },
	{ time: 1558342800, value: 22 },
	{ time: 1558346400, value: 22 },
	{ time: 1558350000, value: 22 },
	{ time: 1558353600, value: 22 },
	{ time: 1558357200, value: 22 },
	{ time: 1558360800, value: 22 },
	{ time: 1558364400, value: 22 },
	{ time: 1558422000, value: 22 },
	{ time: 1558425600, value: 22 },
	{ time: 1558429200, value: 22 },
	{ time: 1558432800, value: 22 },
	{ time: 1558436400, value: 22 },
	{ time: 1558440000, value: 22 },
	{ time: 1558443600, value: 22 },
	{ time: 1558447200, value: 23 },
	{ time: 1558450800, value: 23 },
	{ time: 1558508400, value: 23 },
	{ time: 1558512000, value: 23 },
	{ time: 1558515600, value: 23 },
	{ time: 1558519200, value: 23 },
	{ time: 1558522800, value: 23 },
	{ time: 1558526400, value: 23 },
	{ time: 1558530000, value: 23 },
	{ time: 1558533600, value: 23 },
	{ time: 1558537200, value: 23 },
	{ time: 1558594800, value: 23 },
	{ time: 1558598400, value: 23 },
	{ time: 1558602000, value: 23 },
	{ time: 1558605600, value: 23 },
	{ time: 1558609200, value: 23 },
	{ time: 1558612800, value: 23 },
	{ time: 1558616400, value: 23 },
	{ time: 1558620000, value: 22 },
	{ time: 1558623600, value: 22 },
	{ time: 1558681200, value: 23 },
	{ time: 1558684800, value: 23 },
	{ time: 1558688400, value: 23 },
	{ time: 1558692000, value: 23 },
	{ time: 1558695600, value: 23 },
	{ time: 1558699200, value: 23 },
	{ time: 1558702800, value: 23 },
	{ time: 1558706400, value: 23 },
	{ time: 1558710000, value: 23 },
	{ time: 1558940400, value: 23 },
	{ time: 1558944000, value: 23 },
	{ time: 1558947600, value: 23 },
	{ time: 1558951200, value: 23 },
	{ time: 1558954800, value: 23 },
	{ time: 1558958400, value: 23 },
	{ time: 1558962000, value: 23 },
	{ time: 1558965600, value: 23 },
	{ time: 1558969200, value: 23 },
	{ time: 1559026800, value: 23 },
	{ time: 1559030400, value: 23 },
	{ time: 1559034000, value: 23 },
	{ time: 1559037600, value: 23 },
	{ time: 1559041200, value: 23 },
	{ time: 1559044800, value: 23 },
	{ time: 1559048400, value: 23 },
	{ time: 1559052000, value: 23 },
	{ time: 1559055600, value: 23 },
];  
 
 function findElement(arr, sing) {
   for(var i = 0; i < arr.length; i++) {
      var element = arr[i];
      for( prop in element ) { if(element[prop] == sing) return i}
   }
   return -1; 
};
	let OT = 1557759600;
	let DO = 1559044800;
  
  var x = findElement(myArrayRed, OT);
  var y = findElement(myArrayRed, DO);
  var x2 = findElement(myArrayBlue, OT);
  var y2 = findElement(myArrayBlue, DO); 
 // console.log(x);
    
 let resultRed =  myArrayRed.slice(x,y);
 let resultBlue = myArrayBlue.slice(x2,y2);

 var lineSeries = chart.addAreaSeries({
  topColor: 'rgba(21, 101, 192, 0)',
  bottomColor: 'rgba(21, 101, 192, 0)',
  lineColor: 'rgba(255, 0, 43, 1)',
  lineWidth: 5,
  });
 
 lineSeries.setData(resultRed);

 
 lineSeries.applyOptions({
    priceLineVisible: false,
  	lastValueVisible: false,
  	priceFormat: {
     type: 'custom',
     minMove: 1,
	  formatter: price => price.toFixed(0) + 'C°',
   		 },
 });
 

var areaSeries = chart.addAreaSeries({
  topColor: 'rgba(21, 101, 192, 0.5)',
  bottomColor: 'rgba(21, 101, 192, 0.5)',
  lineColor: 'rgba(255, 255, 255,1)',
  lineWidth: 5,
});

areaSeries.setData(resultBlue);

areaSeries.applyOptions({
    priceLineVisible: false,
  	lastValueVisible: false,
  	priceFormat: {
     type: 'custom',
     minMove: 1,
	  formatter: price => price.toFixed(0) + 'C°',
   		 },
 });
 

chart.timeScale().scrollToPosition(0, true);

var width = 27;
var height = 27;

var button = document.createElement('div');
button.className = 'go-to-realtime-button';
button.style.left = (chartWidth - width - 60) + 'px';
button.style.top = (chartHeight - height - 30) + 'px';
button.style.color = '#4c525e';
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6.5 1.5l5 5.5-5 5.5M3 4l2.5 3L3 10"></path></svg>';
document.body.appendChild(button);

var timeScale = chart.timeScale();
timeScale.subscribeVisibleTimeRangeChange(function() {
	var buttonVisible = timeScale.scrollPosition() < 0;
	button.style.display = buttonVisible ? 'block' : 'none';
});

button.addEventListener('click', function() {
	timeScale.scrollToRealTime();
});

button.addEventListener('mouseover', function() {
	button.style.background = 'rgba(250, 250, 250, 1)';
	button.style.color = '#000';
});

button.addEventListener('mouseout', function() {
	button.style.background = 'rgba(250, 250, 250, 0.6)';
	button.style.color = '#4c525e';
});

var legend = document.createElement('div');
legend.classList.add('legend');
document.body.appendChild(legend);

var firstRow = document.createElement('div');
legend.appendChild(firstRow);

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
	  const price = param.seriesPrices.get(areaSeries);
		const mDate = new Date (param.time * 1000 ).toISOString().substr(0, 10);
    const Time = new Date (param.time * 1000 ).toISOString().substr(11, 8);
		   
    firstRow.innerText = mDate + ' | ' + Time + ' —' + '  ' + price.toFixed(0) + 'C°';
    bas = Number.parseInt(price.toFixed(0));
	} 
  else {
  	firstRow.innerText = '';
  }
});

var legend2 = document.createElement('div');
legend2.classList.add('legend2');
document.body.appendChild(legend2);

var firstRow2 = document.createElement('div');
legend2.appendChild(firstRow2);

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
	  const price = param.seriesPrices.get(lineSeries);
		const mDate = new Date (param.time * 1000 ).toISOString().substr(0, 10);
    const Time = new Date (param.time * 1000 ).toISOString().substr(11, 8);
		   
    firstRow2.innerText = mDate + ' | ' + Time + ' —' + '  ' + price.toFixed(0) + 'C°';
   ulica = Number.parseInt(price.toFixed(0));
	} 
  else {
  	firstRow2.innerText = '';
  }
});

var legend3 = document.createElement('div');
legend3.classList.add('legend3');
document.body.appendChild(legend3);

var firstRow3 = document.createElement('div');
legend3.appendChild(firstRow3);

function pad(n) {
	var s = ('0' + n);
	return s.substr(s.length - 2);
}

chart.subscribeCrosshairMove((param) => {
	if (param.time) {
		
    firstRow3.innerText = Math.abs(ulica - bas) + 'C°';
		  }
  else {
  	firstRow3.innerText = '';
  }
});
32 Кб должно хватить для любых задач!!!
Вернуться к началу
Аватара пользователя
Sancho
Полковник
Сообщения: 4066
Зарегистрирован: 25.12.2015{, 17:32}
Репутация: 590
Откуда: Ярославль.
Имя: Александр
Контактная информация:
Контактная информация пользователя Sancho

Кто знает JavaScript. Помогите!!!

#4

Сообщение Sancho » 11.11.2020{, 10:46}

Serquick писал(а): ↑
11.11.2020{, 10:23}
 Поковырял и вот что получилось
Взлетело?
мой ник в нете и почте omelchuk890, если что. запомните на всякий. многие знают номер тлф.
Вернуться к началу
Аватара пользователя
Serquick
Сержант
Сообщения: 254
Зарегистрирован: 25.11.2019{, 01:07}
Репутация: 46
Откуда: Украина
Имя: Сергей

Кто знает JavaScript. Помогите!!!

#5

Сообщение Serquick » 11.11.2020{, 10:51}

Serquick писал(а): ↑
11.11.2020{, 10:23}
 let OT = 1557759600;
let DO = 1559044800;
меняем дату здесь и на графике меняется интервал времени.

Отправлено спустя 1 минуту 19 секунд:
Буду пробывать прикрутить http://cssworld.ru/datepicker/#a20
32 Кб должно хватить для любых задач!!!
Вернуться к началу
Аватара пользователя
Sancho
Полковник
Сообщения: 4066
Зарегистрирован: 25.12.2015{, 17:32}
Репутация: 590
Откуда: Ярославль.
Имя: Александр
Контактная информация:
Контактная информация пользователя Sancho

Кто знает JavaScript. Помогите!!!

#6

Сообщение Sancho » 11.11.2020{, 11:02}

Значит всё ок.
Посмотрел код - Вы там с пропами ведёте поиск. Я ещё не дорос, наверно.
Я предполагаю, можно было, в Вашем случае крайние значения, искать с помощью простого сравнения в цикле с ОТ или DO. Как предположение.
мой ник в нете и почте omelchuk890, если что. запомните на всякий. многие знают номер тлф.
Вернуться к началу
Аватара пользователя
Serquick
Сержант
Сообщения: 254
Зарегистрирован: 25.11.2019{, 01:07}
Репутация: 46
Откуда: Украина
Имя: Сергей

Кто знает JavaScript. Помогите!!!

#7

Сообщение Serquick » 11.11.2020{, 12:07}

Sancho писал(а): ↑
11.11.2020{, 11:02}
 Значит всё ок.
Посмотрел код - Вы там с пропами ведёте поиск. Я ещё не дорос, наверно.
Я предполагаю, можно было, в Вашем случае крайние значения, искать с помощью простого сравнения в цикле с ОТ или DO. Как предположение.
function findElement(arr, sing) {
for(var i = 0; i < arr.length; i++) {
var element = arr;
for( prop in element ) { if(element[prop] == sing) return i}
}
return -1;
};

Это я взял с форума, скорость выше :)
32 Кб должно хватить для любых задач!!!
Вернуться к началу
Аватара пользователя
Sancho
Полковник
Сообщения: 4066
Зарегистрирован: 25.12.2015{, 17:32}
Репутация: 590
Откуда: Ярославль.
Имя: Александр
Контактная информация:
Контактная информация пользователя Sancho

Кто знает JavaScript. Помогите!!!

#8

Сообщение Sancho » 11.11.2020{, 12:24}

Serquick, if(element[prop] == sing) - сравнение с точностью до секунды? может было-бы лучше >= , как только больше или равно?
мой ник в нете и почте omelchuk890, если что. запомните на всякий. многие знают номер тлф.
Вернуться к началу
Аватара пользователя
Serquick
Сержант
Сообщения: 254
Зарегистрирован: 25.11.2019{, 01:07}
Репутация: 46
Откуда: Украина
Имя: Сергей

Кто знает JavaScript. Помогите!!!

#9

Сообщение Serquick » 11.11.2020{, 12:33}

Sancho писал(а): ↑
11.11.2020{, 12:24}
 Serquick, if(element[prop] == sing) - сравнение с точностью до секунды? может было-бы лучше >= , как только больше или равно?
Ну в принципе Да. Тут лучше >= :yes:

Отправлено спустя 6 минут 44 секунды:
Хотя разницы не увидел :) Может на массивах 1к и более, будет заметней.
32 Кб должно хватить для любых задач!!!
Вернуться к началу
Аватара пользователя
Phazz
Полковник
Сообщения: 2552
Зарегистрирован: 17.10.2016{, 15:38}
Репутация: 367
Откуда: Сургут
Имя: Анатолий

Кто знает JavaScript. Помогите!!!

#10

Сообщение Phazz » 11.11.2020{, 14:47}

Что-то мне подсказывает, что это на базе данных нужно делать. Хотя я и сам ещё не особо волоку в этом )
Вернуться к началу
Аватара пользователя
Sancho
Полковник
Сообщения: 4066
Зарегистрирован: 25.12.2015{, 17:32}
Репутация: 590
Откуда: Ярославль.
Имя: Александр
Контактная информация:
Контактная информация пользователя Sancho

Кто знает JavaScript. Помогите!!!

#11

Сообщение Sancho » 11.11.2020{, 14:55}

Serquick писал(а): ↑
11.11.2020{, 12:40}
 Хотя разницы не увидел Может на массивах 1к и более, будет заметней.
Разница в том, что при изменении в 1 сек, например, если поменять при вводе, добавить не 1час, а XX минут, сравнение не найдёт точку.
Это как гистерезис делать не на больше или равно, а на только равно.
Надеюсь мысль донёс.
мой ник в нете и почте omelchuk890, если что. запомните на всякий. многие знают номер тлф.
Вернуться к началу
Ответить

Вернуться в «Спросить у знатоков»