我有一个Highcharts甘特,它从MySQL表中提取解析后的JSON数据。数据跨越4年,但我需要过滤它,使其只显示2022年的数据。问题是我不能使用标准的Highcharts数据过滤器,因为它不会删除没有任何数据的空行。我想在呈现图表之前筛选数据,这样就不会显示没有条形的行。可以吗?
jc3wubiy1#
这真的很简单,你只需要在创建图表之前过滤你的JSON数据。一个简化的过程如下:
const receivedData = [{ name: 'Start prototype', start: '2021-04-11', end: '2021-04-17' }, { name: 'Test prototype', start: '2022-04-11', end: '2022-04-17' }, { name: 'Develop', start: '2022-06-11', end: '2022-07-11' }, { name: 'Run acceptance tests', start: '2022-09-11', end: '2022-09-21' }]; const filteredData = receivedData.filter( dataEl => new Date(dataEl.start) > new Date('2022') ); // THE CHART Highcharts.ganttChart('container', { series: [{ name: 'Project 1', data: filteredData.map(({ name, start, end }) => ({ name, start: new Date(start).getTime(), end: new Date(end).getTime() })) }] });
现场演示:https://jsfiddle.net/BlackLabel/0vhdg5jw/
1条答案
按热度按时间jc3wubiy1#
这真的很简单,你只需要在创建图表之前过滤你的JSON数据。一个简化的过程如下:
现场演示:https://jsfiddle.net/BlackLabel/0vhdg5jw/