如何使用 Javascript 轻量级图表 API 获取自定义图表的当前价格？

Question

如何在图表右侧以蓝色标记的图表中显示价格。

到目前为止，这是我的代码：

const chart = LightweightCharts.createChart(document.body, { width: 1500, height: 700 });
const lineSeries = chart.addLineSeries();

const log = console.log;

lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

function randomIntFromInterval(min, max) {
    return Math.round((Math.random() * (max - min + 1) + min) * 100) / 100;
}

var startDate = new Date();
var endDate = new Date(2020, 5, 1);

log(lineSeries);


// lineSeries.applyOptions({
//     priceFormat: {
//         type: 'custom',
//         minMove: 0.02,
//         formatter: function(price) {
//             log(price);                //Gives me the price in a very bad way. Also gives it when i hover over chart.
//             return '$' + price;
//         },
//     }
// });


/**
 * Updates the chart its lines randomly.
 */
function updateChartStatic() {
    setTimeout(() => {
        //For updating the date.
        let newDate = new Date(startDate);

        //Creates a random int.
        let randomInt = randomIntFromInterval(randomIntFromInterval(50, 100), randomIntFromInterval(75, 125));

        // log(randomInt);
        log(lineSeries._series._priceScale.rn.ct);

        //Updates the line of the chart.
        lineSeries.update({
            time: newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate(),
            value: randomInt,
        });

        //Makes sure the loop can actually end by adding a day to the startDate.
        startDate.setDate(startDate.getDate() + 1);

        //Make sure the function will be called again if startDate and endDate date not matches with each other. If they do, the loop will end and a console log will be shown.
        startDate <= endDate ? updateChartStatic() : log("END LOOP");
    }, 1000);
}

updateChartStatic();

Atm 我在一些数字之间随机更新行。 我需要知道价格以确保根据当前价格更新线路。 因此，一条新线的价格将比当前价格高或低 50 美元/欧元。 这将使它不那么尖锐:) 在伪代码中：

let randomInt = randomIntFromInterval((currentPrice - 50), (currentprice + 50));

Answer 1

将最后一个值添加到 lineSeries 数据的另一种方法是在使用 setTimeout 进行另一行更新之前保存数据。 例如，

/**
 * Updates the chart its lines randomly.
 */
 function updateChartStatic() {

    // Array where we store all our added prices.
    var oldPrices = [];

    setTimeout(() => {

        // Creates a random int.
        let randomInt = randomIntFromInterval(randomIntFromInterval(50, 100), randomIntFromInterval(75, 125));

        // Logs OLD price. First time will be empty in this case
        log(oldPrices[oldPrices.length - 1]);

        // Updates the line of the chart.
        lineSeries.update({
            time: newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate(),
            value: randomInt,
        });

        // Add your currently set price to the array of prices.
        oldPrices.push(randomInt);
    }, 1000);
}

旧价格存储在var oldPrices中。

这是来自 tradingview.com 的另一个示例。 https://jsfiddle.net/TradingView/8a29s0qj/

Answer 2

好的，所以我在 lineSeries 变量中做了一些探索。 我找到了一种方法来获取图表中最后添加的线的当前价格。 这是如何：

//Get price of last line
let currentPrice = Array.from(Array.from(lineSeries._dataUpdatesConsumer.de.ee)[lineSeries._dataUpdatesConsumer.de.ee.size - 1][1].mapping)[0][1].value;


//Code below ends up the same but is splitted a bit more. Might look bit more understandable :P
let map = lineSeries._dataUpdatesConsumer.de.ee;

let getLastItemInMap = Array.from(map)[map.size - 1];

let secondMap = getLastItemInMap[1].mapping;

let getItemInMap = Array.from(secondMap)[0];

// Returns the price
log(getItemInMap[1].value);