当我尝试在同一个组件中渲染两次饼图时,我的自定义工具提示会出错。
在我的容器组件中,我正在渲染两个看起来像这样的图表......
<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实例修改都独立于另一个?
答案 0 :(得分:1)
对于其他任何有这个问题的人来说,这个错误很愚蠢。由于自定义工具提示配置发生在{ Chart }
类上,而不是发生在每个单独的{ Pie }
实例上,因此您需要确保将其作为全局配置处理,而不是在可重用组件内部。如果在可重用组件中执行此配置,则每次实例化组件时,配置都将运行并触发您使用该组件的次数。这是因为饼图(和其他ChartJS组件)扩展了react-chartjs-2库中的{ Chart }
类。