0

我是反应和交易视图图表的新手，我使用轻量级图表库集成到我的反应项目中，我无法获得图表的标题部分。

这是我的代码：

从“轻量级图表”导入 { createChart }；从“反应”导入反应；

const Graph = () => { const chartRef = React.useRef(null);

React.useEffect(()=> {
    if(chartRef.current){
        const chart = createChart(chartRef.current, {
            width: 800,
            height: 500,
            crosshair: {
                mode: "normal"
            },
            layout: {
                backgroundColor: '#000000',
                textColor: 'rgba(255, 255, 255, 0.9)',

            },
            toolbar: {
                hide_top_toolbar: false,
            },
            grid: {
                vertLines: {
                    color: 'rgba(197, 203, 206, 0.5)',
                },
                horzLines: {
                    color: 'rgba(197, 203, 206, 0.5)',
                },
            },
            priceScale: {
                borderColor: 'rgba(197, 203, 206, 0.8)',
            },
            timeScale: {
                borderColor: 'rgba(197, 203, 206, 0.8)',
            },

        });
        prepareChart(chart);
    }
}, [])

function prepareChart(chart) { 

    var candleSeries = chart.addCandlestickSeries();
    var data = [
        { time: "2018-10-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
        { time: "2018-10-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
        { time: "2018-10-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
        { time: "2018-10-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
        { time: "2018-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2019-05-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2019-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2018-01-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
        { time: "2018-02-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
        { time: "2018-03-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
        { time: "2018-04-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
        { time: "2018-05-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2019-06-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2019-07-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
    ];

    candleSeries.setData(data);

    var volumeSeries = chart.addHistogramSeries({
        color: '#26a69a',
        lineWidth: 2,
        priceFormat: {
            type: 'volume',
        },
        overlay: true,
        scaleMargins: {
            top: 0.8,
            bottom: 0,
        },
    });
    volumeSeries.setData([
        { time: '2018-10-19', value: 19103293.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-22', value: 21737523.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-23', value: 29328713.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-24', value: 37435638.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-25', value: 25269995.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-10-26', value: 24973311.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-10-29', value: 22103692.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-30', value: 25231199.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-10-31', value: 24214427.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-01', value: 22533201.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-02', value: 14734412.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-05', value: 12733842.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-06', value: 12371207.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-07', value: 14891287.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-08', value: 12482392.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-09', value: 17365762.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-12', value: 13236769.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-13', value: 13047907.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-14', value: 18288710.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-15', value: 17147123.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-16', value: 19470986.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-19', value: 18405731.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2018-11-20', value: 22028957.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-21', value: 18482233.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-23', value: 7009050.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2018-11-26', value: 12308876.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-02-20', value: 11379006.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-02-21', value: 14680547.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-02-22', value: 12534431.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-02-25', value: 15051182.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-02-26', value: 12005571.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-02-27', value: 8962776.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-02-28', value: 15742971.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-01', value: 10942737.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-04', value: 13674737.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-03-05', value: 15749545.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-03-06', value: 13935530.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-03-07', value: 12644171.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-08', value: 10646710.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-11', value: 13627431.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-12', value: 12812980.00, color: 'rgba(255,82,82, 0.8)' },
        { time: '2019-03-13', value: 14168350.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-14', value: 12148349.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: '2019-03-15', value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: "2018-05-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: "2019-06-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
        { time: "2019-07-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },

    ]);



    // var lastClose = data[data.length - 1].close;
    // var lastIndex = data.length - 1;

    // var targetIndex = lastIndex + 105 + Math.round(Math.random() + 30);
    // var targetPrice = getRandomPrice();

    // var currentIndex = lastIndex + 1;
    // var currentBusinessDay = { day: 29, month: 5, year: 2019 };
    // var ticksInCurrentBar = 0;
    // var currentBar = {
    //     open: null,
    //     high: null,
    //     low: null,
    //     close: null,
    //     time: currentBusinessDay
    // };

    // function mergeTickToBar(price) {
    //     if (currentBar.open === null) {
    //     currentBar.open = price;
    //     currentBar.high = price;
    //     currentBar.low = price;
    //     currentBar.close = price;
    //     } else {
    //     currentBar.close = price;
    //     currentBar.high = Math.max(currentBar.high, price);
    //     currentBar.low = Math.min(currentBar.low, price);
    //     }
    //     candleSeries.update(currentBar);
    // }

    // function reset() {
    //     candleSeries.setData(data);
    //     lastClose = data[data.length - 1].close;
    //     lastIndex = data.length - 1;

    //     targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
    //     targetPrice = getRandomPrice();

    //     currentIndex = lastIndex + 1;
    //     currentBusinessDay = { day: 29, month: 5, year: 2019 };
    //     ticksInCurrentBar = 0;
    // }

    // function getRandomPrice() {
    //     return 10 + Math.round(Math.random() * 10000) / 100;
    // }

    // function nextBusinessDay(time) {
    //     var d = new Date();
    //     d.setUTCFullYear(time.year);
    //     d.setUTCMonth(time.month - 1);
    //     d.setUTCDate(time.day + 1);
    //     d.setUTCHours(0, 0, 0, 0);
    //     return {
    //     year: d.getUTCFullYear(),
    //     month: d.getUTCMonth() + 1,
    //     day: d.getUTCDate()
    //     };
    // }

    // setInterval(function() {
    //     var deltaY = targetPrice - lastClose;
    //     var deltaX = targetIndex - lastIndex;
    //     var angle = deltaY / deltaX;
    //     var basePrice = lastClose + (currentIndex - lastIndex) * angle;
    //     var noise = 0.1 - Math.random() * 0.2 + 1.0;
    //     var noisedPrice = basePrice * noise;
    //     mergeTickToBar(noisedPrice);
    //     if (++ticksInCurrentBar === 5) {
    //     // move to next bar
    //     currentIndex++;
    //     currentBusinessDay = nextBusinessDay(currentBusinessDay);
    //     currentBar = {
    //         open: null,
    //         high: null,
    //         low: null,
    //         close: null,
    //         time: currentBusinessDay
    //     };
    //     ticksInCurrentBar = 0;
    //     if (currentIndex === 5000) {
    //         reset();
    //         return;
    //     }
    //     if (currentIndex === targetIndex) {
    //         // change trend
    //         lastClose = noisedPrice;
    //         lastIndex = currentIndex;
    //         targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
    //         targetPrice = getRandomPrice();
    //     }
    //     }
    // }, 200);

}

return <div ref={chartRef} />;

}

导出默认图表；

4

1 回答 1

0

lightweight-charts不提供任何 GUI 元素，如标题/图例来控制图表本身。如果您想拥有它们 - 您需要自己实现它并使用 API 来控制/更改/显示您希望看到的值。

于 2020-06-17T09:06:12.703 回答