当前位置: 博客 /  Charts  / 解决Chart.js重绘导致不断重叠问题

解决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"
    />
  )
}

- END -