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

由于我们的树模块使用了专用模块，因此在定位特定节点时常规规则将不起作用。相反，我们建议根据import jxl.* import jxl.write.* WritableWorkbook workbook = Workbook.createWorkbook(new File("d:\\output.xls")) WritableSheet sheet = workbook.createSheet("Worksheet 1", 0) log.info(sheet1.isHidden()) Label label = new Label(0, 2, "Test data in Column A, Row 3"); //column=0=A,row=0=1 sheet.addCell(label); Label label1 = new Label(2, 2, "Column C, Row 3"); sheet.addCell(label1); workbook.write() workbook.close()，cls和parent属性来设置样式。

在您的特定示例中，您在data-中的value属性将需要一个chartData前缀（或驼峰数据值）。

data-

，您的工具提示将对应于{ id: '111', parent: '', name: 'John Smith', dataValue: 'no problems' }, ...

%dataValue

类似于样式节点，我们建议使用tooltip : { fontSize : '20px', text : '%dataValue' },或class属性来定位特定类型的节点。

cls

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

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

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

1 个答案: