javascript - HighCharts:树形图数据标签在向下钻取/向上钻取时不一致

Question

假设有一个具有 3 个级别的树形图，在本例中为“大陆 -> 国家/地区 -> 原因”。我希望数据标签在向下钻取时保持一致，以便:

• 当前关卡的标签居中且字体较大
• 左上角是下一级的标签
• 不显示下一个级别之后的标签

例如，一开始当前级别是大陆。其中“非洲”和“欧洲”等应以大字体显示在中心。这些国家/地区应显示在每个国家/地区的左上角。原因应该是看不见的。

向下钻取一级到国家/地区时，“匈牙利”和“法国”应以大字体显示在中心。原因应显示在左上角。大陆应该是看不见的。当向下钻取原因时，原因应显示在中间，其余部分应不可见。

我正在使用此代码来执行此操作。请参阅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'
    }
  });