SPFX-图表-webpart-react-pnpcontrol

Posted 2023-03-27

【中文标题】SPFX-图表-webpart-react-pnpcontrol

【英文标题】：SPFX-Chart-webpart-react-pnpcontrol

【发布时间】：2021-04-20 04:29:37

【问题描述】：

我有一个 spfx webpart，它根据属性窗格中选择的列表显示图表视图。 我可以生成图表，但是在更改列表时，第二个图表数据显示悬停时的上一个图表数据。下面的代码是在 .tsx 文件中的渲染方法

<ChartControl                  
        type=ChartType.Bar                   
         data promise=this._data()                      
         options=
         legend: 
         display: true,
         position: "right",                
         ,
         title: 
         display: true,
         text: "My Chart Data"
         ,  
          />

_data() 方法如下，

let Chart:Chart;
Chart.ChartData = 
    labels: ['Income','Expense','Debt','Savings'],
    datasets: [
      label: 'Archive',
      data: [10,13,20,90]          
    ]
  ;

我已经尝试实现了，

Chart.destroy()/Chart.clear()

但不工作。它显示错误并被拒绝说图表未定义。

在这种情况下如何在加载下一个列表时清除旧数据。

【问题讨论】：

你能给出错误吗？

我在state中保存日期，并创建一个按钮来更新state中的数据，点击两次按钮后，显示正确的数据。

@YLR 在 Chart.Destroy() 上调试时显示未定义的屏幕上没有弹出错误

@Amos_MSF 如何保存状态下的图表数据？

【参考方案1】：

@Starter-代码

 this.state = 
          data: 
            labels:
              [
                'January', 'February', 'March', 'April', 'May', 'June', 'July'
              ],
            datasets:
              [
                label: 'My Second Dataset',
                data:
                  [
                    65, 59, 80, 81, 56, 55, 40
                  ]
              ]
          
        ;

【讨论】：

这不能解决问题。有没有其他方法可以解决之前图表数据的悬停问题。

【参考方案2】：

Chart.datasets.pop();

在代码中使用此行将清空数据集，因此将添加新数据，悬停图表将不会显示旧数据。