HighCharts/Javascript：将每月数据系列重新采样为 Quarterly/Yearly？

Question

在使用Highcharts绘制月度数据图表的React应用中，如何将月度数据重采样为季度或年度数据，然后使用Highcharts绘制？

如果Highcharts没有提供重采样功能，方案可以根据需要使用其他JS库，例如Moment.js。但是，不应将 Highcharts 替换为其他图表库，例如 Highstocks。

提前致谢！

原始月度数据：

const monthlyData = [[946702800000,261],[949381200000,251],[951886800000,282],[954565200000,289],[957153600000,259],[959832000000,259],[962424000000,256],[965102400000,264],[967780800000,289],[970372800000,291],[973054800000,254],[975646800000,275],[978325200000,250],[981003600000,254],[983422800000,227],[986101200000,262],[988689600000,248],[991368000000,237],[993960000000,257],[996638400000,250],[999316800000,239],[1001908800000,253],[1004590800000,235],[1007182800000,259],[1009861200000,259],[1012539600000,264],[1014958800000,243],[1017637200000,240],[1020225600000,214],[1022904000000,238],[1025496000000,251],[1028174400000,255],[1030852800000,259],[1033444800000,248],[1036126800000,260],[1038718800000,268],[1041397200000,246],[1044075600000,259],[1046494800000,264],[1049173200000,273]]

最小可重现代码

export function Chart({ data }) {

    const options = {
        title: { text: 'Time series data' },
        xAxis: { type: 'datetime' },
    }
    options.series = [{
        name: 'foo',
        type: 'line',
        data: [[946702800000,261],[949381200000,251],[951886800000,282],[954565200000,289],[957153600000,259],[959832000000,259],[962424000000,256],[965102400000,264],[967780800000,289],[970372800000,291],[973054800000,254],[975646800000,275],[978325200000,250],[981003600000,254],[983422800000,227],[986101200000,262],[988689600000,248],[991368000000,237],[993960000000,257],[996638400000,250],[999316800000,239],[1001908800000,253],[1004590800000,235],[1007182800000,259],[1009861200000,259],[1012539600000,264],[1014958800000,243],[1017637200000,240],[1020225600000,214],[1022904000000,238],[1025496000000,251],[1028174400000,255],[1030852800000,259],[1033444800000,248],[1036126800000,260],[1038718800000,268],[1041397200000,246],[1044075600000,259],[1046494800000,264],[1049173200000,273]],
    }]

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
    )
}

Answer 1

您需要手动计算季度和年度数据。您可以在下面找到一个简单的示例，了解如何在 React 中执行此操作。我使用了 date-fns 库中的 isSameQuarter 和 isSameYear 方法。

function Chart() {
  const [options, setOptions] = useState({...});

  const getProcessedData = (method) => {
    const processedData = [];
    const monthlyData = getData();

    monthlyData.forEach((el, index) => {
      if (
        index === 0 ||
        !method(new Date(el[0]), new Date(monthlyData[index - 1][0]))
      ) {
        processedData.push(el);
      } else {
        processedData[processedData.length - 1][1] += el[1];
      }
    });

    return processedData;
  };

  const yearlyData = useMemo(() => getProcessedData(isSameYear), []);
  const quarterlyData = useMemo(() => getProcessedData(isSameQuarter), []);

  const setData = (period) => {
    const processedData =
      period === "month"
        ? getData()
        : period === "year"
        ? yearlyData
        : quarterlyData;

    setOptions({
      series: [{
        data: processedData
      }]
    });
  };

  return (
    <>
      <HighchartsReact highcharts={Highcharts} options={options} />
      <button onClick={() => setData("month")}>Monthly Data</button>
      <button onClick={() => setData("quarter")}>Quarterly Data</button>
      <button onClick={() => setData("year")}>Yearly Data</button>
    </>
  );
}

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-w6g6b?file=/demo.jsx

文档：

https://date-fns.org/v2.17.0/docs/isSameQuarter

https://date-fns.org/v2.17.0/docs/isSameYear

HighCharts/Javascript：将每月数据系列重新采样为 Quarterly/Yearly？

HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?

javascript

highcharts

time-series

momentjs

resampling