alibaba / BizCharts

Powerful data visualization library based on G2 and React.
http://bizcharts.net/products/bizCharts
6.16k stars 671 forks source link

分类图例 受控模式, 请问哪个属性是value? #1540

Open vaynevayne opened 1 year ago

vaynevayne commented 1 year ago

BizCharts Version: 4.x Platform: chrome Mini Showcase(like screenshots): forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306

  const [uncheckedLegend, setUncheckedLegend] = useState<string[]>([])

  <Legend
              name="country"
              filter={(country) => {
                return !uncheckedLegend.includes(country)
              }}

              onChange={(e: any) => {
                console.log('e.item', e.item) // unchecked -> true/false 切换,✅

                const unchecked = e.item.unchecked
// 总是true ❌, 我怀疑是onChange之后, bizcharts内部修改了e.item, 进一步推测 filter 不是受控模式的value,或者这个Legend压根不支持受控模式
                console.log('unchecked', unchecked) 
                console.log('value', e.item.value)

                if (unchecked) {
                  setUncheckedLegend((prev) => [...prev, e.item.value])
                } else {
                  setUncheckedLegend((prev) => prev.filter((str) => str !== e.item.value))
                }
              }}
            />
vaynevayne commented 1 year ago

原始需求: 切换xField或者yField时,保留zField, 解决办法: LineChart 换成 就行