Question

假设有一个包含3个级别的树形图，在这种情况下为＆＃34;大陆 - ＆gt;国家 - ＆gt;原因＆＃34 ;.我希望在向下钻取时dataLabels保持一致，以便：

当前级别的标签居中且字体大小
下一级的标签位于左上角
不显示下一个级别的标签

例如，在开始时，当前级别是欧洲大陆。那里＆＃34;非洲＆＃34;和＆＃34;欧洲＆＃34;应该用大字体显示在中心。这些国家/地区应显示在左上角。原因应该是看不见的。

向国家深入挖掘一级时，＆＃34;匈牙利＆＃34;和＃34;法国＆＃34;应该用大字体显示在中心。原因应显示在左上角。大陆应该是看不见的。向下钻取另一个等级的原因时，原因应显示在中心，其余原因应该是不可见的。

我正在使用此代码执行此操作。见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：树形图数据标签在向下钻取/钻取时不一致

1 个答案: