ApexCharts动态添加系列

如何解决ApexCharts动态添加系列

我正在使用ApexCharts显示cpu使用率。随着进程的产生（并被杀死），可以动态添加和删除系列。进程的顺序不一定固定（理想情况下，我想按cpu使用率排序）。

添加流程后，面积图开始显示奇怪的工件：

出于某种奇怪的原因，我开始看到最能形容为“锯齿”的东西。

我用来生成此代码的代码如下：

    render() {
        let oProcesses = this.props.oProcesses;

        Object.keys(oProcesses).forEach((sKey) => {
            if (oProcesses[sKey].find((e) => { return e.y !== 0 }) === undefined) {
                delete oProcesses[sKey];
            }
        });

        let aSeries = Object.keys(oProcesses).map((sKey) => {
            return {
                name: oProcesses[sKey][0].oExTradata.oStat.sComm,data: oProcesses[sKey].map((eEntry) => {
                    return { x: eEntry.x,y: eEntry.y };
                }),color: `#${this.intToRGB(this.hashCode(oProcesses[sKey][0].oExTradata.oStat.sComm))}`
            };
        });
        let aColors = aSeries.map((e) => { return e.color });

        return <Chart options={{
            chart: {
                type: "area",stacked: true
            },dataLabels: {
                enabled: false
            },xaxis: {
                type: 'datetime',labels: {
                    format: 'HH:mm'
                }
            },stroke: {
                width: 0
            },fill: {
                type: 'solid',colors: aColors
            }
        }} series={aSeries} type="area" />;
    }

系列中的X是日期对象，Y是浮点值。数据在图形开始之后开始的系列，不会获得更早的值。因此，假设流程B在两次采样后开始，数据可能是：

[
    [{
        oExTradata: {
            oStat: {
                sComm: "a"
            }
        },x: '12:48',y: 15
    },{
        oExTradata: {
            oStat: {
                sComm: "a"
            }
        },x: '12:49',y: 7
    },x: '12:50',y: 8
    },x: '12:51',y: 13
    }],[{
        oExTradata: {
            oStat: {
                sComm: "b"
            }
        },y: 12
    },{
        oExTradata: {
            oStat: {
                sComm: "b"
            }
        },y: 18
    }]
]

如何防止这些伪影？