The issue has been closed

当data/options变更后图例的顺序出现异常 #6485

CullenNg posted onGitHub

问题描述

当data/options(scale)变更后图例的顺序出现了异常，scale.color.domain 配置的顺序失效

重现链接

https://codesandbox.io/p/sandbox/xmgl3j

重现步骤

正常加载数据A，此时的图例顺序是正常的
切换成数据B并更新了scale.color配置，因为数据B只有1组数据，目前为止一切正常
```
scale: {
color: {
 domain: ["无情感"],
 range: ["#65789B"],
}
}
```

再切切回数据A并更新了scale.color配置，图例的顺序就错了

scale: {
color: {
 domain: ["正面", "负面", "中性", "无情感"],
 range: ["#60DDA9", "#F08A8A", "#5B8FF9", "#65789B"],
}
}

正确的顺序应该是如下：

预期行为

更新数据+options.scale之后的图例顺序正常

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

不错的 issue，很细节，看起来是 render 之后 chart 会保存一些信息，导致下一次 merge 的时候出现问题。可以在 render 前先清空一下 chart。

btn.addEventListener("click", () => {
  chart.clear();  // 👈🏻 这里
  const newOptions = cloneDeep(baseOptions);
  // 无情感的如下（对应数据B）
  newOptions.scale.color = {
    domain: ["正面", "负面", "中性", "无情感"],
    range: ["#60DDA9", "#F08A8A", "#5B8FF9", "#65789B"],
  };
  chart.options(newOptions);
  chart.changeData(emotionalData);
  chart.render();
});

上面可以解决你的问题，这个 issue 可能算是一个 bug，如果有兴趣可以排查看看。

posted by hustcc 6 months ago

Fund this Issue

$0.00

Funded

Pull requests

当data/options变更后图例的顺序出现异常 #6485

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect