Question

我有树状图，它有两个值Squadra2和Squadra1，值分别为13778.00和16.00 现在，当树形图渲染时，它们之间需要采用百分比差异并将其拆分，但是现在我遇到了需要精确狙击才能选择值为16.00的Squadra1的情况如您所见

是否有可能声明例如Squadra1的最小宽度，并不允许其低于该值（保持可点击状态）？请让我知道，谢谢

    {
  "chart": {
  renderTo:"container",
    "backgroundColor": "#FFFFFF"
  },
  "colorAxis": {
    "labels": {
      "enabled": false
    },
    "tickLength": 0,
    "gridLineWidth": 0,
    "min": 0,
    "max": 20,
    "stops": [
      [
        -0.001,
        "#ffffff"
      ],
      [
        0.5,
        "#7cb5ec"
      ],
      [
        0.501,
        "#7cb5ec"
      ],
      [
        0.499,
        "#ffffff"
      ],
      [
        1,
        "#434348"
      ],
      [
        1.001,
        "#434348"
      ]
    ]
  },
  "legend": {
    "enabled": true,
    "itemStyle": {
      "color": "#FFF"
    }
  },
  "tooltip": {},
  "series": [
    {
      "drillUpButton": {
        "position": {
          "align": "center",
          "verticalAlign": "bottom"
        },
        "theme": {
          "fill": "white",
          "stroke-width": 1,
          "stroke": "silver",
          "r": 2,
          "style": {
            "fontSize": "12px"
          },
          "states": {
            "hover": {}
          }
        }
      },
      "type": "treemap",
      "layoutAlgorithm": "squarified",
      "allowDrillToNode": true,
      "dataLabels": {
        "enabled": false
      },
      "levelIsConstant": false,
      "levels": [
        {
          "level": 1,
          "dataLabels": {
            "enabled": true
          },
          "borderWidth": 6,
          "borderColor": "#FFFFFF"
        }
      ],
      "data": [
        {
          "id": "id_0",
          "name": "Squadra1",
          "parentName": "Squadra1"
        },
        {
          "id": "id_0_0",
          "name": "ACC",
          "parent": "id_0",
          "parentName": "Squadra1",
          "scale": 0,
          "value": 1,
          "colorValue": 1.8117836848479765
        },
        {
          "id": "id_0_1",
          "name": "FEB",
          "parent": "id_0",
          "parentName": "Squadra1",
          "scale": 0,
          "value": 0,
          "colorValue": 5.48633338681632
        },
        {
          "id": "id_0_2",
          "name": "MAG",
          "parent": "id_0",
          "parentName": "Squadra1",
          "scale": 0,
          "value": 8,
          "colorValue": 3.4398769612396007
        },
        {
          "id": "id_0_3",
          "name": "PAM",
          "parent": "id_0",
          "parentName": "Squadra1",
          "scale": 0,
          "value": 7,
          "colorValue": 2.775814171372472
        },
        {
          "id": "id_1",
          "name": "Squadra2",
          "parentName": "Squadra2"
        },
        {
          "id": "id_1_0",
          "name": "ACC",
          "parent": "id_1",
          "parentName": "Squadra2",
          "scale": 10,
          "value": 13778,
          "colorValue": 13.595706940649173
        }
      ],
      "events": {},
      "_colorIndex": 0
    }
  ],
  "subtitle": {
    "text": "",
    "align": "",
    "style": {
      "color": "",
      "fontSize": "",
      "fontFamily": "",
      "fontStyle": "none",
      "textDecoration": "none",
      "fontWeight": "none"
    }
  },
  "title": {
    "text": "",
    "align": "",
    "style": {
      "color": "",
      "fontWeight": "none",
      "fontSize": "",
      "fontFamily": "",
      "fontStyle": "none",
      "textDecoration": "none"
    }
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "color": "",
      "fontSize": "",
      "fontFamily": "",
      "fontStyle": "none",
      "textDecoration": "none",
      "fontWeight": "none"
    },
    "position": {
      "align": "",
      "verticalAlign": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "turboThreshold": 5000,
      "colorByPoint": false
    }
  }
}

小提琴的链接 http://jsfiddle.net/3k5fmrut/2/

Answer 1

最简单的方法是为Squadra2设置一个较小的值，并向该对象添加一个带有实际值的附加属性，该对象可以在tooltip.formatter回调中使用，以在工具提示。查看下面发布的演示和代码。

代码：

数据：

{
  "id": "id_1",
  "name": "Squadra2",
  "realValue": 13778,
  "parentName": "Squadra2"
}, {
  "id": "id_1_0",
  "name": "ACC",
  "parent": "id_1",
  "parentName": "Squadra2",
  "scale": 10,
  "value": 137.78,
  "colorValue": 13.595706940649173
}

tooltip.formatter：

tooltip: {
  formatter: function() {
    return this.point.realValue;
  }
}

演示：

https://jsfiddle.net/BlackLabel/trz96fy7/

Answer 2

您可以定义自己的算法来构建树形图：Highcharts treemap series

您可以选择一种算法，使每个元素的宽度和高度最小，最大的元素共享剩余空间。

在树形图中声明意甲的最小宽度

2 个答案: