如何修改树形图中节点的属性？

Posted 2021-05-05

我构建了一个树形图，并希望改变图形的一些属性，即节点描述中使用的字体大小，并指定各种节点的颜色

右键单击图形并选择“查看源代码” - >“解析JSON”时，我看到设置放在labels的每个元素中。如何在渲染之前访问这些以强制我的选择（全局（字体）或每个节点（背景颜色））？

由于解析的JSON视图显示，作为示例并且对于label的给定元素，"background-color":"#1f1f1f"设置在与text相同的级别，我试图把它放在我的series中：

{
  "text": "Candidates",
  "children": [
    {
      "text": "Can not scan: 13 %",
      "value": 13
    },
    {
      "text": "Scanned: 87 %",
      "children": [
        {
          "text": "Not authenticated: 61 %",
          "children": [
            {
              "text": "Confirmed vulnerable: 38 %",
              "value": 38,
              "font-color": "yellow"
            },
            {
              "text": "Unknown: 23 %",
              "value": 23
            }
          ]
        },
        (...)

但是没有应用"font-color": "yellow"（或任何其他属性）。

答案

在我们的树形图文档页面first example中，我们有一个如何更改颜色的调色板示例。该代码如下所示：

 var myConfig = {
  "type":"treemap",
  "options":{
      "split-type":"balanced",
      "color-type":"palette",
      "palette":["#f44336","#29b6f6","#ab47bc","#ffc107","#5c6bc0","#009688"]
  },
  "plotarea":{
    "margin": "0 0 35 0"
  },
  "series":[
      {
          "text":"North America",
          "children":[
...

如果要更改在options.box中完成的fontSize：

var myConfig = {
  "type":"treemap",
  "options":{
      "split-type":"balanced",
      "color-type":"palette",
      "palette":["#f44336","#29b6f6","#ab47bc","#ffc107","#5c6bc0","#009688"],
      box: {
        fontSize:15
      }
  },
  "plotarea":{
    "margin": "0 0 35 0"
  },
  "series":[
      {
          "text":"North America",
...

Demo here

相关文档：https://www.zingchart.com/docs/chart-types/treemap/#treemap__box