graph - 如何使用 react-vis 绘制时间序列图

Question

我正在使用 react-vis lib 进行可视化。谁能告诉我如何为以下数据绘制时间序列图？提前致谢。

data = [
    {x:"01/01/2018",y:75},
    {x:"14/02/2018",y:60},
    {x:"18/03/2018",y:80},
    {x:"15/04/2018",y:90},
    {x:"10/05/2018",y:95},
]

Answer 1

在其他示例页面上，您有一个时间表示例（X 为时间格式的折线图）以及提供的代码示例。与常规 LineSeries 使用的主要区别：

• 在 XYPlot 组件中，精确确定 x 轴的类型：xType="time"
• 以日期格式给出 ax 属性

尝试使用您的数据，一个非常基本的示例是：

<XYPlot
    xType="time"
    width={1000}
    height={300}>
    <HorizontalGridLines />
    <VerticalGridLines />
    <XAxis title="X Axis" />
    <YAxis title="Y Axis" />
    <LineSeries
      data={[
        {x: new Date('01/01/2018'), y: 75},
        {x: new Date('01/14/2018'), y: 60},
        {x: new Date('03/18/2018'), y: 80},
        {x: new Date('04/15/2018'), y: 90}
      ]}/>
</XYPlot>

因此，在将数据提供给 LineSeries 组件之前，您可以使用 data.map 函数修改以将 x 值替换为 new Date(x) 。

还要注意 JS Date 对象喜欢格式 MM/DD/YYY 所以 '01/14/2018' 比 '14/01/2018' -> JS Short date format