在呈现 highcharts 之前过滤数据

gopyfrb3  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(135)

我有一个Highcharts甘特,它从MySQL表中提取解析后的JSON数据。
数据跨越4年,但我需要过滤它,使其只显示2022年的数据。
问题是我不能使用标准的Highcharts数据过滤器,因为它不会删除没有任何数据的空行。
我想在呈现图表之前筛选数据,这样就不会显示没有条形的行。可以吗?

jc3wubiy

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/

相关问题