请问 clear 后如何设置 theme？

[thep0y]

我用 react 写了一个 demo，点击不同的按钮刷新container，但clear后无法通过chart.theme设置主题。

import React, { useEffect, useRef, useState } from 'react'
import './App.css'
import Header from '~/components/Header'
import { Chart } from '@antv/g2'

const App: React.FC = () => {
  const containerRef = useRef(null)
  const [chart, setChart] = useState<Chart | null>(null)
  const [isContainerReady, setIsContainerReady] = useState(false)

  useEffect(() => {
    if (containerRef.current) {
      setIsContainerReady(true)
      setChart(new Chart({
        container: 'container',
        theme: 'classic'
      }))
    }
  }, [containerRef])

  const resetChart = (): void => {
    if (chart) {
      chart.clear()

      chart.theme('classic')  // ==> 不设置主题会报错需要设置 theme，设置后会报错不可覆盖 classic
  }

  return (
    <>
      {
        isContainerReady && chart ? <Header chart={chart} resetChart={resetChart} /> : null
      }

      <div id="container" ref={containerRef}></div>
    </>
  )
}

export const graph = (chart: Chart): void => {
  chart
    .forceGraph()
    .data({
      type: 'fetch',
      value: 'https://assets.antv.antgroup.com/g2/miserable.json'
    })
    .scale(
      'color', {
        range: [
          '#4e79a7',
          '#f28e2c',
          '#e15759',
          '#76b7b2',
          '#59a14f',
          '#edc949',
          '#af7aa1',
          '#ff9da7',
          '#9c755f',
          '#bab0ab'
        ]
      }
    )
  void chart.render()
}

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]

export const interval = (chart: Chart): void => {
  // 声明可视化
  chart
    .interval() // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'genre') // 编码 x 通道
    .encode('y', 'sold') // 编码 y 通道

  // 渲染可视化
  void chart.render()
}

const charts: Record<string, Render> = {
  条形图: interval,
  网络关系图: graph
}

interface HeaderProps {
  chart: Chart
  resetChart: () => void
}

const Header = memo(({ chart, resetChart }: HeaderProps) => {
  const render = (name: string): void => {
    resetChart()

    charts[name](chart)
  }

  return (
    <>
      {Object.keys(charts).map((name, idx) => (
        <button key={idx} onClick={() => { render(name) }}>
          {name}
        </button>
      ))}
    </>
  )
})

请问问题出在哪里？如何解决？

[pepper-nice]

调用 clear 后需要重新显式申明 theme，通过这种方式再次声明 theme：

chart.clear();

chart.theme({
  type: 'classic' 
});
// or
chart.attr('theme', 'classic');

chart.render();

@thep0y

[hustcc]

chart.theme('classic')

这种也需要支持吧，theme api 加一个重载判断。

[pearmini]

chart.theme('classic')

这种也需要支持吧，theme api 加一个重载判断。

这种可以暂时不考虑？因为不阻断，按照 @pepper-nice 的写法就行。不然还需要考虑 chart.coordinate('polar') 这种写法。

[thep0y]

各位开发者，我特别同意你们讨论的观点，但我觉得文档里是不是应该对api写得更详尽一些？文档中很多地方写得都特别草率，实例重新设置主题可能只是其中一个不明确的地方。

[pearmini]

各位开发者，我特别同意你们讨论的观点，但我觉得文档里是不是应该对api写得更详尽一些？文档中很多地方写得都特别草率，实例重新设置主题可能只是其中一个不明确的地方。

嗯嗯，目前文档确实有很多问题，在6月份的时候会升级一下文档，会处理这些问题。