如何使用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函数进行修改，以用新的Date（x）替换x值。

还要注意，JS Date对象喜欢格式为MM / DD / YYY，所以'01 / 14/2018'比'14 / 01/2018'-> JS短日期格式更好