HighCharts/Javascript：将月度数据系列重新采样为季度/年度？答案

【问题标题】：HighCharts/Javascript: Resample Monthly Data Series to Quarterly/Yearly?HighCharts/Javascript：将月度数据系列重新采样为季度/年度？
【发布时间】：2021-05-17 22:28:12
【问题描述】：

在使用 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}
        />
    )
}

【问题讨论】：

嗨@Nyxynyx，您是否有不同的季度/年度数据集，还是应该根据月度数据计算？
@ppotaczek 应根据原始月度数据计算/汇总/重新采样季度/年度数据。感谢您的澄清！

标签： javascript highcharts time-series momentjs resampling

【解决方案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

【讨论】：