时间戳

首页 > 解决方案 > 在树形图中声明系列的最小宽度

javascript - 在树形图中声明系列的最小宽度

问题描述

我有树形图，它有两个值 Squadra2，值为 13778.00 和 Squadra1，值为 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/

标签： javascripthighchartsjsfiddletreemap

解决方案

实现它的最简单方法是为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: function() {
    return this.point.realValue;
  }
}

演示：

推荐阅读