解决Chart.js重绘导致不断重叠问题

场景

在 React 的项目中使用 Chart.js 实现可视化，在 componentWillMount()中使用 Chart.plugins.register 来绘制横向坐标轴以及纵向文字标签，格式为：

componentWillMount() {
  let verticalLabelPlugin = {
    ... //省略
  };
  Chart.plugins.register(verticalLabelPlugin);
}

问题

上面的注册方式会导致 Chart 重绘，导致绘制的内容、文字标签叠加，颜色越来越重、字体越来越粗，新绘制的内容不断覆盖、重叠在一起。

解决方式

不要在使用这种全局注册的方式，而是给单独的图表加入 plugins 属性，注意 plugins 的格式是数组，格式：

绘制一项

render() {
  let verticalLabelPlugin = {
    ... //省略
  };
  return (
    <Bar
      data={this.getData(this.props)}
      options={this.getOptions()}
      plugins={[verticalLabelPlugin]}
      ref="barCharRef"
    />
  )
}

绘制多项

render() {
  let verticalLabelPlugin = {
    ... //省略
  };
  let horizonalLinePlugin = {
    ... //省略
  }

  return (
    <Bar
      data={this.getData(this.props)}
      options={this.getOptions()}
      plugins={[verticalLabelPlugin, horizonalLinePlugin]}
      ref="barCharRef"
    />
  )
}