TradingView 轻量级图表价格似乎无法正确缩放

Question

我刚刚将比特币的实时数据添加到我的图表中。出现了一个高得连 tradingview 都无法处理的峰值……至少，在我的图表上是这样。这是它的样子：正如您在 6 月 2 日看到的那样，比特币涨得如此之高，以至于它从屏幕上消失了。这应该是可以修复的，因为在实际的交易视图页面上，它看起来一切正常：此外，如果我缩小图表，它看起来非常正常：所以 我想要的 是我的图表以与 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 -> 价格轴 -> priceScale() -> autoScale: true 和 scaleMargins 具有不同的顶部和底部。似乎 scaleMargins 有效，但是当我回到过去并确保我不再看到峰值时，一切都和平坦一样好:(我还尝试在代码末尾添加：chart.timeScale().fitContent (); 但这给出的结果与我现在得到的结果相同，但后来缩小了。如果我用 timeScale 放大，它看起来仍然一样。

Answer 1

问题似乎是由无效的数据格式引起的（您在需要数字的地方传递了字符串）。我们将在调试模式下警告 https://github.com/tradingview/lightweight-charts/issues/315.

后的无效类型

编辑： 由于启用调试模式时会显示里程碑 3.2 警告。

TradingView 轻量级图表价格似乎无法正确缩放

TradingView Lightweight Chart price seems to not scale correctly

javascript

charts

tradingview-api

lightweight-charts