HighCharts：Treemap dataLabels 在 drilldown/drillup 上不一致

Question

假设有一个 3 级树图，在本例中 "Continent -> Country -> Causes"。我希望数据标签在向下钻取时保持一致，以便：

当前关卡的标签居中且字体较大
下一级标签在左上角
不显示下一层的标签

比如一开始当前关卡是大陆。还有"Africa"和"Europe"等应该用大字体显示在中间。这些国家应分别显示在左上角。原因应该是看不见的。

当向下钻取国家一级时，"Hungary" 和 "France" 应该以大字体显示在中心。原因应显示在左上角。大陆应该是看不见的。当向下钻取另一个层次到原因时，原因应该显示在中间，其余部分应该不可见。

我正在使用此代码来执行此操作。参见 http://jsfiddle.net/h7tq7oo2/

    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        allowDrillToNode: true,
        levelIsConstant: false,
        dataLabels: {
            enabled: false
        },
        levels: [{
            level: 1,
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '20px'
                }
            },
            borderWidth: 3
        },{
            level: 2,
            dataLabels: {
                align: "left",
                verticalAlign: "top",
                enabled: true
            },
            borderWidth: 3
        }],
        data: points
    }]

最初，一切看起来都很好。第一个可见级别（大陆）的标签居中且较大，下一个级别（国家/地区）的标签位于左上角。但是，当向下钻取国家/地区时，国家/地区的标签居中，但很小（应该很大）。原因位于左上角，并且如预期的那样小。向下钻取另一个层次的原因看起来很相似：标签居中，但很小（应该很大）。

这就是奇怪的地方：再次向上钻取国家/地区，我得到了我想要的结果，但仅限于我之前查看的那个国家/地区。我之前看到的国家现在是中心化的大国，但其他国家仍然很小。深入到另一个国家并备份也会改变那个国家的字体大小，其余的仍然很小。向上钻取一个级别到各大洲会导致国家/地区标签（在左上角应该很小）在左上角但很大，但同样仅适用于我向下钻取的那些国家/地区。其余的很小，如预期的那样位于左上角。

这对我来说看起来很不一致，但我不完全确定这是一个错误。我做错了什么？

Answer 1

这样解决的：http://jsfiddle.net/tL3u3215/2/

  var current_level = 1;

  function get_current_level() {
    var rootNode = this.series[0].rootNode;

    if (rootNode === '') {
      current_level = 1;
    } else {
      if (rootNode.split('_').length == 2) {
        current_level = 2;
      } else if (rootNode.split('_').length >= 2) {
        current_level = 3;
      }
    }
  }

  var chart = $('#container').highcharts({
    chart: {
      events: {
        redraw: get_current_level
      }
    },
    xAxis: {
      events: {
        setExtremes: get_current_level
      }
    },
    yAxis: {
      events: {
        setExtremes: get_current_level
      }
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      dataLabels: {
        enabled: false,
        formatter: function () {
          var point = this.point;
          if (current_level == point.level && current_level != 3) {
            return '<span style="font-size:20px">' + point.name + "<span>";
          } else if (current_level == point.level - 1 || current_level == 3) {
            return '<span>' + point.name + "<span>";
          } else {
            return null;
          }
        }
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true,
        },
        borderWidth: 3
      }, {
        level: 2,
        dataLabels: {
          align: "left",
          verticalAlign: "top",
          enabled: true
        },
        borderWidth: 3
      }],
      data: points
    }],
    subtitle: {
      text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
    },
    title: {
      text: 'Global Mortality Rate 2012, per 100 000 population'
    }
  });

HighCharts：Treemap dataLabels 在 drilldown/drillup 上不一致

HighCharts: Treemap dataLabels inconsistent on drilldown/drillup

javascript

jquery

highcharts

treemap