React中使用Syncfusion实现折线图日期范围过滤功能求助

核心思路 #

通过React状态管理选中的日期范围，实时过滤本地数据集，将过滤后的数据传递给折线图组件，触发图表自动更新。

实现步骤与代码示例 #

1. 父组件统一管理状态与数据 #

创建父组件维护日期范围状态、过滤数据，并将处理后的数据传递给子组件：

import React, { useState, useEffect } from 'react';
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import { LineChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';

// 你的本地数据集
const rawData = [
  { date: '2024-01-01', value: 120 },
  { date: '2024-01-02', value: 150 },
  { date: '2024-01-03', value: 130 },
  { date: '2024-01-04', value: 180 },
  // 补充更多数据...
];

const ChartWithDateFilter = () => {
  // 初始化日期范围状态，默认设为数据首尾日期
  const [selectedRange, setSelectedRange] = useState({
    start: new Date(rawData[0].date),
    end: new Date(rawData[rawData.length - 1].date)
  });
  const [filteredData, setFilteredData] = useState(rawData);

  // 处理日期范围选择变化
  const handleDateChange = (args) => {
    setSelectedRange({
      start: args.startDate,
      end: args.endDate
    });
  };

  // 根据选中范围过滤数据
  useEffect(() => {
    const filtered = rawData.filter(item => {
      const itemDate = new Date(item.date);
      return itemDate >= selectedRange.start && itemDate <= selectedRange.end;
    });
    setFilteredData(filtered);
  }, [selectedRange]);

  return (
    <div>
      {/* DateRangePicker组件 */}
      <DateRangePickerComponent
        startDate={selectedRange.start}
        endDate={selectedRange.end}
        change={handleDateChange}
        placeholder="选择日期范围"
      />

      {/* 折线图组件，绑定过滤后的数据 */}
      <LineChartComponent
        title="数据趋势图"
        primaryXAxis={{ valueType: 'DateTime', labelFormat: 'yyyy-MM-dd' }}
        primaryYAxis={{ title: '数值' }}
      >
        <Inject services={[Legend, Tooltip, DataLabel, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={filteredData}
            xName="date"
            yName="value"
            name="数据值"
            type="Line"
          />
        </SeriesCollectionDirective>
      </LineChartComponent>
    </div>
  );
};

export default ChartWithDateFilter;

2. 关键细节说明 #

• 状态联动：用useState存储选中的日期范围，DateRangePicker的change事件触发状态更新。
• 数据过滤：通过useEffect监听日期范围状态变化，实时过滤原始数据，只保留符合范围的条目。
• 图表自动更新：Syncfusion折线图会自动监听dataSource属性变化，当过滤后的数据更新时，图表会重新渲染展示新的趋势。

3. 注意事项 #

• 确保原始数据中的日期格式可被new Date()正确解析，若格式不兼容，需提前做格式转换（比如用原生方法或日期处理工具统一格式）。
• 初始状态建议设置为数据集的首尾日期，避免页面加载时图表无数据展示。

内容的提问来源于stack exchange，提问作者Akkipeddi Sudhakar