如何用 Ant Design Charts 实现多折线面积图？

Question

我想要做的是我想绘制一条代表预测值的线和另外两条代表上 95% 置信区间和下 95% 置信区间的线。我想使用 Ant Design Charts 来实现这一点。到目前为止，我有一个多线图，但我希望置信区间是一个区域。

我的数据：

const data = [
    {"date":"2021-11-17", "category":"upper_95", "value":23.87625},
    {"date":"2021-11-17", "category":"lower_95", "value":20.32322},
    {"date":"2021-11-17", "category":"prediction","value":21.21381},
    {"date":"2021-11-18", "category":"upper_95", "value":25.87625},
    {"date":"2021-11-18", "category":"lower_95", "value":22.32322},
    {"date":"2021-11-18", "category":"prediction","value":19.21381},
    {"date":"2021-11-19", "category":"upper_95", "value":26.87625},
    {"date":"2021-11-19", "category":"lower_95", "value":24.32322},
    {"date":"2021-11-19", "category":"prediction","value":25.21381},
    ...
]

到目前为止我的代码：

const Graph = () => {
    const config = {
         data,
         xField: "date",
         yField: "value",
         seriesField: "category",
         ...
    };
    
    return <Line {...config} />
};

Answer 1

“Ant Design Charts”支持面积图： https://charts.ant.design/en/examples/area/stacked#basic-slider

代替：

return <Line {...config} />

尝试：

return <Area {...config} />