ZingChart 树模块中的控制工具提示和节点颜色

Question

我正在尝试使用 ZingCharts 中的树模块来控制图表中的工具提示文本和节点颜色。我想使用规则更改给定值的节点颜色并让工具提示显示该值。是否有适用于此的令牌？ %node-value 不起作用。

window.addEventListener('load', () => {
  let chartData = [
    {
      id: '111',
      parent: '',
      name: 'John Smith',
      value: 'no problems'
    },
    {
      id: '222',
      parent: '111',
      name: 'Jane Smith',
      value: 'missing info'
    },
    {
      id: '333',
      parent: '111',
      name: 'Jack Smith',
      value: 'missing info'
    },
  ];

  let chartConfig = {
    type: 'tree',
    options: {
      link: {
        aspect: 'arc'
      },

      maxSize: 10,
      minSize: 4,
      node: {
        type: 'circle',
        borderWidth: 0,
        rules : [
          {
            rule: '"%node-value" == "missing info"',
            backgroundColor : 'red'
          },
        ],
        tooltip : {
          fontSize : '20px',
          text : '%node-value'
        },
        size : 10,
        hoverState: {
          borderAlpha: 1,
          borderColor: '#000',
          borderWidth: '2px'
        },
        label: {
          width: '100px'
        }
      },
      progression: 0,
      textAttr: 'name',
      valueAttr: 'value'
    },
    series: chartData
  };

  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: '100%',
    output: 'canvas'
  });
});

请参阅此处的简化示例： https://app.zingsoft.com/demos/view/3C044JNF

Answer 1

由于我们的树模块使用了专门的模块，因此当针对特定节点时，常规规则将不起作用。相反，我们建议根据 cls、parent 和 data- 属性设置样式。

在您的具体示例中，chartData 中的 value 属性需要 data- 前缀（或驼峰数据值）。

    {
      id: '111',
      parent: '',
      name: 'John Smith',
      dataValue: 'no problems'
    },
...

并且您的工具提示将对应于 %dataValue

        tooltip : {
          fontSize : '20px',
          text : '%dataValue'
        },

与样式节点类似，我们建议使用 cls 或 class 属性来定位特定类型的节点。

    {
      id: '333',
      parent: '111',
      name: 'Jack Smith',
      dataValue: 'missing info',
      cls: 'missing'
    },

然后您可以将此 'missing' class 样式设置为唯一节点。

options: {
  node: {...},
  'node[cls-missing']: {
    backgroundColor: 'red'
  }

}

ZingChart 树模块中的控制工具提示和节点颜色

Control tooltips and node color in ZingChart tree module

tree

zingchart