我刚刚将比特币的实时数据添加到我的图表中。有一个高峰,甚至交易视图都无法处理它......至少,在我的图表上。这就是它的样子: 正如你在 6 月 2 日看到的那样,比特币涨得如此之高,以至于它走出了屏幕。这应该是可以修复的,因为在实际的 tradingview 页面本身上,它看起来都很好且正常: 此外,如果我缩小图表,它看起来完全正常: 所以我想要的是我的图表的缩放方式与 tradingview.com 上的缩放方式相同.
这是我的代码:
// Predifined variables
var chart, priceArea, fetchedData;
// Faster to write log();
const log = console.log;
// Get data.
fetch('./getData.php', {
method: 'GET'
}).then(response => response.json()).then(function (data) {
// Set data to a global variable for global usage.
fetchedData = data;
// To make sure the chart is initialized and set after this fetch is done. Else I would get a error for setting data that I do not yet have.
initChartSettings();
});
/**
* Initializes the chart and its settings.
*/
function initChartSettings() {
// Create chart canvas
chart = LightweightCharts.createChart(document.getElementById('Chart'), {width: 1500, height: 700,});
// Could also be done in the width and height code line but thought it might work for scaling.
chart.applyOptions({
timeScale: {
// Adds hours and minutes to the chart.
timeVisible: true,
secondsVisible: false
}
});
// Init price line
priceArea = chart.addAreaSeries();
// This array is needed to make the setData work. It expects an array with objects.
let arrayWithOldData = [];
// Get each item in the fetchedData array. Since it gives more data then I need I use this for loop to take the time and value. Used to create chart lines.
for (let i = 0; i < fetchedData.length; i++) {
let dataElement = fetchedData[i];
// Object needed for the arrayWithOldData.
let oldData = {
// Timestamp / 1000 to make it a workable timestamp for tradingview chart and + 7200 seconds to make sure I get a timestamp of amsterdam (+2:00).
time: (dataElement[0] / 1000) + 7200,
value: dataElement[4]
};
// Add the data to the array.
arrayWithOldData.push(oldData);
}
log(arrayWithOldData);
// Set data
priceArea.setData(arrayWithOldData);
// PriceLine options
priceArea.applyOptions({
topColor: 'rgba(70, 130, 180, 0.5)',
bottomColor: 'rgba(70, 130, 180, 0.1)',
lineColor: '#4682B4',
lineWidth: 2
});
startTime = new Date();
updateLiveChartData();
}
我试过的:
我在我的代码中尝试了以下内容:https ://github.com/tradingview/lightweight-charts/blob/master/docs/customization.md -> price axis -> priceScale() -> autoScale: true and scaleMargins with diffrent顶部和底部。似乎 scaleMargins 有效,但是当我回到过去并确保我不再看到峰值时,一切都和平坦一样好:(我还尝试放在代码的末尾:chart.timeScale().fitContent() ; 但这给出的结果与我现在的结果相同,但后来缩小了。如果我用 timeScale 放大,它看起来仍然一样。