React中使用Syncfusion ChartComponent动态渲染选中对象对应折线图

直接对selectedList数组进行遍历，动态生成SeriesDirective组件即可，修改后的图表代码如下：

<ChartComponent primaryXAxis={{valueType:"Category"}}>
  <Inject services={[LineSeries, Category]}/>
  <SeriesCollectionDirective>
    {
      selectedList.map(item => (
        <SeriesDirective 
          key={item.label}
          type="Line" 
          dataSource={item.value} 
          xName="month" 
          yName="sales"
          name={item.label} // 可选配置，用于设置折线在图例中的显示名称
        />
      ))
    }
  </SeriesCollectionDirective>
</ChartComponent>

实现逻辑说明 #

• 多选组件返回的selectedList每一项结构和listaBairros的元素完全匹配，自带value（对应折线的数据集）和label（对应折线的展示名称）属性，无需额外做数据关联
• 遍历过程中添加key属性满足React列表渲染的要求，避免渲染异常
• 当选中项发生变化时，selectedList状态更新会自动触发图表重新渲染，动态增减对应的折线

内容的提问来源于stack exchange，提问作者Matheus Dias