ChartJS2中同一類型的多個圖表ReactJS - Buggy工具提示

當我嘗試在同一個組件中渲染兩次餅圖時，我的自定義工具提示變得越來越麻煩。ChartJS2中同一類型的多個圖表ReactJS - Buggy工具提示

在我的容器組件的，我繪製兩個圖表看起來像這樣...

<PieChart key={1} brand={this.state.brand} data={this.state.data.dshCredit} labels={this.state.payBillsLabels} title={'Pay Bills'} toggleTotalPastDue={this.toggleTotalPastDue} /> 

<PieChart key={2} brand={this.state.brand} data={this.state.data.dshOrder} labels={this.state.orderStatusLabels} isRendering={this.state.isRendering} title={'Order Status'} orderPeriod={this.state.orderPeriod} dataType={this.state.orderStatus} />

<PieChart />是需要動態地創建自定義工具提示，然後與數據一起展示他們的保健成分使用ChartJS2餅圖組件。

componentWillMount() { 
    var that = this; 

    // Use custom tooltips 
    Chart.pluginService.register({ 
    beforeRender: function (chart) { 
     if (chart.config.options.showAllTooltips) { 
     chart.pluginTooltips = []; 
     chart.config.data.datasets.forEach(function (dataset, i) { 
      chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
      chart.pluginTooltips.push(new Chart.Tooltip({ 
       _chart: chart.chart, 
       _chartInstance: chart, 
       _data: chart.data, 
       _options: chart.options.tooltips, 
       _active: [sector] 
      }, chart)); 
      }); 
     }); 

     // turn off normal tooltips 
     chart.options.tooltips.enabled = false; 
     } 
    }, afterDraw: function (chart, easing) { 
     if (chart.config.options.showAllTooltips) { 
     chart.options.tooltips.enabled = true; 
     Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 
      tooltip._options.callbacks.label = (tooltip, data) => { 
      return that.configureTooltipLabel(tooltip, data); 
      } 
      tooltip.initialize(); 
      tooltip._options.position = 'outer'; 
      tooltip.update(); 
      tooltip.pivot(); 
      tooltip.transition(easing).draw(); 
     }); 
     chart.options.tooltips.enabled = false; 
     } 
    } 
    }); 
} 

configureTooltipLabel = (tooltip, data) => { 
    var originalLabel = data.labels[tooltip.index] + ': ', 
     originalData = data.datasets[0].data[tooltip.index]; 

    if (this.state.dataType && data.options.title.text == 'Order Status') { 
    switch(this.state.dataType) { 
     case 'units': 
     return originalLabel + originalData + ' Units' 
     break; 
     case 'dollar': 
     return originalLabel + '$' + originalData 
     break; 
     case 'total': 
     return originalLabel + originalData + ' Orders' 
    } 
    } else { 
    return originalLabel + originalData; 
    } 
} 

render() { 
    return (
     <Pie key={this.state.options.title.text} ref='chart' data={this.state.data} options={this.state.options} /> 
    ); 
}

如果在容器組件中我只使用<PieChart />一次，所有東西都可以正確渲染。當我第二次嘗試使用它時，這是工具提示出現錯誤的地方。第一個餅圖似乎正確渲染，但第二個似乎有第一個圖表和第二個圖表的工具提示。

下面是一個視覺效果的截圖示例。您可以看到原始背後的第二個工具提示：

它幾乎看起來好像修改原始餅圖的所有內容都會修改第二個餅圖。有什麼方法可以確保每個Pie實例修改獨立於另一個嗎？

來源

2017-10-18 developthewebz

對於有這個問題的其他人來說，這個錯誤是相當愚蠢的。由於自定義工具提示配置發生在{ Chart }類上，而不是每個單獨的{ Pie }實例上，因此您需要確保將其作爲全局配置處理，而不是在可重用組件內。如果您在可重用組件中執行此配置，則每次您實例化組件時，配置都會運行併爲您使用該組件的次數啓動。這是因爲餅圖（和其他ChartJS組件）擴展了react-chartjs-2庫中的{ Chart }類。

來源

2017-10-19 18:12:52 developthewebz

ChartJS2中同一類型的多個圖表ReactJS - Buggy工具提示

回答

相關問題