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

【问题标题】：Control tooltips and node color in ZingChart tree moduleZingChart 树模块中的控制工具提示和节点颜色
【发布时间】：2020-03-31 20:25:01
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： tree zingchart

【解决方案1】：

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

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

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

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

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

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

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

然后您可以将这个“缺失”类设置为唯一节点。

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

}

【讨论】：