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工具提示

回答

相关问题