Question

我正在尝试在我的项目中实施react-vis。我需要显示基于日期的数据。我使用的是tickFormat，但它在x轴上显示了两次相同的日期。我在这里添加了几行代码。

       <XYPlot
        width={1140}
        height={440}
        >
        <LineMarkSeries
           lineStyle={{stroke: '#e0e0e0'}}
            markStyle={{stroke: '#6dc6c1'}}
            style={{
                strokeWidth: '2px'
            }}
            strokeStyle="solid"
            data={[
                {
                    x: Date.parse("05/05/2019"),
                    y: 0
                },
                {
                    x: Date.parse("05/12/2019"),
                    y: 12
                },
                {
                    x: Date.parse("05/13/2019"),
                    y: 16
                }
            ]}
         />
          <XAxis
            attr="x"
            attrAxis="y"
            orientation="bottom"
            tickFormat={function tickFormat(d){return 
                           moment(d).format("MMM DD")}}
            tickLabelAngle={0}
         />
        <YAxis />
    </XYPlot>

Answer 1

如果您将xType指定为ordinal，它将使用您的x值作为刻度标签（例如：类似于条形图）。因此，您不必使用Date.parse对x值进行多余的转换。

<XYPlot
  width={1140}
  height={440}
  xType='ordinal'
>
    <LineMarkSeries
      lineStyle={{stroke: '#e0e0e0'}}
      markStyle={{stroke: '#6dc6c1'}}
      style={{ strokeWidth: '2px' }}
      strokeStyle="solid"
      data={[
        {
          x: "05/05/2019",
          y: 0
        },
        {
          x: "05/12/2019",
          y: 12
        },
        {
          x: "05/13/2019",
          y: 16
        }
      ]}
    />
    <XAxis />
</XYPlot>

使用react-vis在x轴上以（MM-DD）格式显示日期

1 个答案: