ZingChart树状图链接按类设置样式失效问题求助

针对你遇到的链接类样式被忽略、仅显示默认样式的问题，可以从以下几个方向排查和修复：

1. 修正样式配置的层级位置 #

ZingChart中，树状图的链接样式需要嵌套在plot.styles下，而非全局配置层级。错误的层级会导致类选择器无法被识别。正确的配置结构示例：

zingchart.render({
  id: 'treeChart',
  data: {
    type: 'tree',
    plot: {
      styles: {
        'link[cls-UH]': {
          lineWidth: 2,
          lineColor: 'red',
          lineStyle: 'dashdot'
        },
        link: {
          lineWidth: 3,
          lineColor: 'blue',
          lineStyle: 'solid'
        }
      }
    },
    nodes: [
      { id: "1:RAH", text: "RAH" },
      { id: "1:4:RAH", text: "4:RAH" }
    ],
    links: [
      {"type":"link","source":"1:RAH","target":"1:4:RAH","cls":"UH"}
    ]
  }
});

2. 验证链接的cls属性是否正确绑定 #

通过ZingChart的API查看实际加载的链接数据，确认cls属性是否被正确解析：

// 图表渲染完成后执行
const chartData = zingchart.exec('treeChart', 'getdata');
console.log(chartData.links); // 检查输出的链接对象中是否存在"cls":"UH"字段

如果cls属性缺失，排查你的链接数据是否在传入时被意外修改。

3. 检查ZingChart版本兼容性 #

部分旧版本的ZingChart对link[cls-n]选择器的支持存在问题，建议升级到最新稳定版后重试。

4. 尝试替换cls为class属性 #

少数场景下，部分版本可能对class属性的支持更稳定，可以尝试将链接配置中的cls":"UH"替换为class":"UH"，同时将样式选择器改为'link[class-UH]'。

内容的提问来源于stack exchange，提问作者Yoann Mainguy