#javascript #highcharts #time-series #momentjs #resampling
#javascript #highcharts #временные ряды #momentjs #Повторная выборка
Вопрос:
В приложении React, которое использует Highcharts для построения диаграммы с использованием месячных данных, как мы можем пересчитать ежемесячные данные в квартальные или годовые данные, а затем отобразить их с помощью 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}
/>
)
}
Комментарии:
1. Привет @Nyxynyx, у вас другой набор данных для квартального / годового периода или его следует рассчитывать на основе ежемесячных данных?
2. @ppotaczek Ежеквартальные / годовые данные должны быть рассчитаны / агрегированы / пересчитаны на основе исходных месячных данных. Спасибо за разъяснение!
Ответ №1:
Вам нужно рассчитать квартальные и годовые данные вручную. Ниже вы можете найти простой пример того, как вы можете сделать это в React. Я использовал isSameQuarter isSameYear методы и из date-fns библиотеки.
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
Документы: