1

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

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

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

4

1 回答 1

3

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

于 2017-10-19T18:12:52.370 回答