React Js Plotly 消除图中的时间间隔

Question

我正在尝试绘制股票数据，但图表中存在空白，这些时间段的数据不存在。我如何消除这些差距？我发现有一个 update_xaxes 函数，但我不确定如何将它应用到我的案例中。

我的代码：

import React, { useState, Component, useEffect } from "react";
import Plot from 'react-plotly.js';

export const Chart = () => {

    return (
        <div>
            <Plot
                data={[
                    {
                        x: data['dates'],
                        y: data['open_price'],
                        type: 'scatter'
                    }
                ]}
                layout={{
                    autosize: false,
                    width: 1500,
                    height: 800,
                 xaxis: {
                        color: 'red',
                        rangebreaks: {
                            bounds: ["sat", "mon"],
                            values: ["2015-12-25", "2016-01-01"],
                            bounds: [17, 9], pattern: "hour"
                        }
                    }
                }}
            />
        </div>
    )
}

Answer 1

react-ploty 允许通过 props 配置底层 ploty 配置。按照@r-beginners的建议，您已经在使用 accepts the same Traces Object than regular ploty. Therefore you can use rangebreaks 的 data 道具来达到预期的效果。

Answer 2

xaxis: {
                        color: 'red',
                        rangebreaks: [
                            { bounds: ["sat", "mon"] },
                            {
                                values: ["2019-12-25"]
                            },
                            { bounds: [17, 9], pattern: "hour" }
                        ]
                    }

我通过将 rangebreaks 设为数组来修复它。

React Js Plotly 消除图中的时间间隔

React Js Plotly Remove Time Gaps In Graph

reactjs

plotly

plotly.js