Question

当我尝试在同一个组件中渲染两次饼图时，我的自定义工具提示会出错。

在我的容器组件中，我正在渲染两个看起来像这样的图表......

<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实例修改都独立于另一个？

Answer 1

对于其他任何有这个问题的人来说，这个错误很愚蠢。由于自定义工具提示配置发生在{ Chart }类上，而不是发生在每个单独的{ Pie }实例上，因此您需要确保将其作为全局配置处理，而不是在可重用组件内部。如果在可重用组件中执行此配置，则每次实例化组件时，配置都将运行并触发您使用该组件的次数。这是因为饼图（和其他ChartJS组件）扩展了react-chartjs-2库中的{ Chart }类。

ChartJS2中的多个相同类型的图表ReactJS - Buggy工具提示

1 个答案: