日期类型的xaxis以相反的顺序显示react-plotly.js

时间:2019-01-08 18:27:44

标签: reactjs plotly.js

我正在使用react-plotly.js绘制带有滑块范围的条形图。图表的X轴类型是日期。我使用时间选择器输入轴范围。当我选择时间为“今天”,即将来的结束时间时,图表将以相反的顺序显示x轴。 enter image description here

此外,您会注意到,即使在该时间范围内存在数据,它也不会显示任何条形图。日期格式有问题吗?还是不适合将来的日期? 我的情节配置如下:

const layout = {
        title: this.state.chartTitle,
        autosize: true,
        dragmode: false,
        margin: {
          r: 0,
          t: 50,
          b: 100,
          pad: 0,
          autoexpand: true
        },
        hoverlabel: {
          bgcolor: 'rgba(0,0,0,1)',
          bordercolor: 'rgba(200,200,200,1)'
        },
        width: this.state.layoutWidth,
        height: '750',
        yaxis: {

          type: 'linear',
          showgrid: true
        },
        xaxis: {
          type: 'date',
          autorange: false,
          fixedrange: false, // true disables range selection on main graph
          showgrid: false,
          range: this.state.axisRange,
          rangeslider: {
            visible: true,
            range: this.state.sliderRange   
          }
        } 

此外,我要输入的时间是unix格式。在应用到plotly之前,我将其转换为日期时间格式。我应用于图表的格式正确吗?

axisRange: [moment(1544418000000).format('YYYY-MM-DD hh:mm:ss'), moment(1544590799000).format('YYYY-MM-DD hh:mm:ss')],

0 个答案:

没有答案