SPFX-图表-webpart-react-pnpcontrol

Question

我有一个 spfx webpart，它根据属性窗格中选择的列表显示图表视图。我可以生成图表，但是在更改列表时，第二个图表数据显示 hover.The 上的上一个图表数据，下面的代码是在 .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()

但不是 working.It 显示错误并被拒绝说图表未定义。

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

Answer 1

@Starter-code

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

Answer 2

Chart.datasets.pop();

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

SPFX-图表-webpart-react-pnpcontrol

SPFX-Chart-webpart-react-pnpcontrol

sharepoint-online

web-parts

spfx

pnp-js