HighCharts:树映射数据标签在向下钻取/向上钻取时不一致

HighCharts: Treemap dataLabels inconsistent on drilldown/drillup

本文关键字：钻取 不一致 映射 数据 标签 HighCharts      更新时间：2023-09-26

假设有一个具有3个级别的树图，在本例中为"大陆->国家->原因"。我希望数据标签在向下搜索时保持一致，以便：

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

例如，在开始时，当前级别是大陆。"非洲"answers"欧洲"等应该用大字体显示在中间。国家/地区应分别显示在左上角。原因应该是看不见的。

当向下钻取一个级别到国家时，"匈牙利"answers"法国"应该用大字体显示在中心。原因应显示在左上角。大陆应该是看不见的。当深入到另一个层次的原因时，原因应该显示在中心，其余的应该是不可见的。

我正在使用此代码来执行此操作。看见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
    }]

起初，一切看起来都很好。第一个可见级别（大陆）的标签居中且很大，下一个级别（国家）的标签在左上角。然而，当向下钻取一个级别到国家时，国家的标签是居中的，但很小（应该是大的）。原因在左上角，正如预期的那样小。从另一个层面深入到原因看起来很相似：标签居中，但很小（应该很大）。

这就是奇怪的地方：再次深入到各个国家，我得到了我想要的结果，但只针对我之前关注的一个国家。我早些时候看到的这个国家现在是以中心为中心的，很大，但其他国家仍然很小。深入到另一个国家并备份更改了该国家的字体大小，其余的仍然很小。向上钻取各大洲的国家标签（左上角应该很小）在左上角，但很大，但同样只适用于我向下钻取的国家。其余的都很小，如预期的那样在左上。

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

这样解决：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'
    }
  });
相关文章：