Объявление минимальной ширины серии в древовидной карте

Question

У меня есть древовидная диаграмма, и у нее есть два значения Squadra2 со значением 13778,00 и Squadra1 со значением 16,00точный, чтобы выбрать Squadra1 со значением 16,00. Как вы можете видеть на картинке

Есть ли возможность объявить, например, минимальную ширину 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

Вы можете определить свой собственный алгоритм построения древовидной карты: Серия древовидных карт Highcharts

Вы можете выбрать алгоритм так, чтобы каждый элемент имел минимальную ширину и высоту, а самые большие элементы разделяли оставшееся пространство.

Answer 2

Самый простой способ добиться этого - установить меньшее значение для 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/