Собрал такой график
Код: Выделить всё
<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>
В общем как обработать массив?