如何使用react-vis绘制时间序列图表？技术咨询

Hey there! I’ve built plenty of time series charts with react-vis, so let me break down exactly how to implement this for your data. The main thing to note here is that react-vis works best with numerical values for axes, so we’ll need to convert your string dates into timestamps first. Here’s a step-by-step guide:

1. First, make sure react-vis is installed #

If you haven’t already, add the package to your project:

npm install react-vis --save
# or
yarn add react-vis

2. Convert your date strings to timestamps #

react-vis can’t directly parse DD/MM/YYYY string dates for the x-axis, so we’ll convert each date to a Unix timestamp (milliseconds since epoch). We’ll need to be careful with the date format—since new Date() might misinterpret DD/MM/YYYY as MM/DD/YYYY in some locales, we’ll manually split the date parts to avoid issues.

Here’s a helper function to process your data:

const processTimeSeriesData = (rawData) => {
  return rawData.map(item => {
    // Split DD/MM/YYYY into individual parts
    const [day, month, year] = item.x.split('/');
    // Convert to timestamp (note: months are 0-indexed in JS Date)
    const timestamp = new Date(year, month - 1, day).getTime();
    return { x: timestamp, y: item.y };
  });
};

3. Build the chart component #

Now we’ll create a component that uses react-vis’s core components to render the time series. We’ll include grid lines, axes, and the line series for clarity.

Here’s the full component code:

import React from 'react';
import {
  XYPlot,
  XAxis,
  YAxis,
  LineSeries,
  VerticalGridLines,
  HorizontalGridLines
} from 'react-vis';

const TimeSeriesChart = () => {
  // Your raw data
  const rawData = [
    {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}
  ];

  // Process the data into timestamp format
  const processedData = processTimeSeriesData(rawData);

  // Optional: Custom date format for X-axis ticks
  const formatXAxisTick = (timestamp) => {
    const date = new Date(timestamp);
    // Format as DD/MM/YYYY (adjust this to your preferred format)
    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
  };

  return (
    <XYPlot width={600} height={400}>
      {/* Add grid lines for better readability */}
      <VerticalGridLines />
      <HorizontalGridLines />
      {/* X-axis set to "time" type to handle timestamps */}
      <XAxis
        type="time"
        tickFormat={formatXAxisTick}
        tickLabelAngle={-45} // Rotate labels to prevent overlap
      />
      <YAxis />
      {/* Render the line series with your processed data */}
      <LineSeries data={processedData} color="#12939A" />
    </XYPlot>
  );
};

export default TimeSeriesChart;

4. Key details to note #

• X-axis type: Setting type="time" tells react-vis that the x-values are timestamps, so it will automatically handle scaling and spacing correctly.
• Tick formatting: The tickFormat function lets you customize how dates are displayed on the X-axis—feel free to adjust the format to something like MMM YYYY (e.g., Jan 2018) if that works better for your use case.
• Date parsing: Manually splitting the date parts ensures that DD/MM/YYYY is interpreted correctly, regardless of the user’s locale.

5. Customization options #

Want to tweak the chart further? Here are a few quick ideas:

• Add markers to each data point with MarkSeries
• Change the line style (thickness, dashed lines) using the strokeWidth or strokeDasharray props on LineSeries
• Add a tooltip using Hint from react-vis to show exact values on hover

That’s it—this should give you a fully functional time series chart with your data! Let me know if you run into any snags.

内容的提问来源于stack exchange，提问作者Shrishail Uttagi