javascript - Highcharts - 向下钻取图表时更改文本框的值

Question

解释这一点很棘手，所以请耐心等待。

我用 Highcharts 创建了这个大 TreeMap :

http://jsfiddle.net/mb3hu1px/2/

var data = {
    "ARS": {
      "01To03Years": {
        "N": {
          "ARGENTINA": 951433
        }
      },
      "Above05Years": {
        "N": {
          "ARGENTINA": 3719665
        }
      }
    },
    "CNY": {
      "03To05Years": {
        "N": {
          "CHINA": 162950484
        }
      }
    },
    "COP": {
      "Above05Years": {
        "N": {
          "COLOMBIA": 323390000
        }
      }
    },
    "EUR": {
      "01To03Years": {
        "Y": {
          "BELGIUM": 393292575
        }
      }
    }
  },
  points = [],
  currencyPoints,
  currencyVal,
  currencyI = 0,
  periodPoints,
  periodI,
  yesOrNoPoints,
  yesOrNoI,
  currency,
  period,
  yesOrNo,
  mil,
  causeMil,
  causeMilI,
  causeName = {
    'N': 'Country Name',
    'Y': 'Country Name'
  };

for (currency in data) {
  if (data.hasOwnProperty(currency)) {
    currencyVal = 0;
    currencyPoints = {
      id: 'id_' + currencyI,
      name: currency,
      color: Highcharts.getOptions().colors[currencyI]
    };

    periodI = 0;

    for (period in data[currency]) {
      if (data[currency].hasOwnProperty(period)) {
        periodPoints = {
          id: currencyPoints.id + '_' + periodI,
          name: period,
          parent: currencyPoints.id
        };
        points.push(periodPoints);
        yesOrNoI = 0;

        for (yesOrNo in data[currency][period]) {
          if (data[currency][period].hasOwnProperty(yesOrNo)) {

            yesOrNoPoints = {
              id: periodPoints.id + '_' + yesOrNoI,
              name: yesOrNo,
              parent: periodPoints.id,
            };
            causeMilI = 0;

            for (mil in data[currency][period][yesOrNo]) {
              if (data[currency][period][yesOrNo].hasOwnProperty(mil)) {
              
                causeMil = {
                  id: yesOrNoPoints.id + '_' + causeMilI,
                  name: mil,
                  parent: yesOrNoPoints.id,
                  value: Math.round(+data[currency][period][yesOrNo][mil])
                };
                currencyVal += causeMil.value;
                points.push(causeMil);
                causeMilI = causeMilI + 1;
              }
            }

            points.push(yesOrNoPoints);
            yesOrNoI = yesOrNoI + 1;
          }
        }

        periodI = periodI + 1;
      }
    }

    currencyPoints.value = Math.round(currencyVal / periodI);
    points.push(currencyPoints);
    currencyI = currencyI + 1;
  }
}

Highcharts.chart('container', {
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    animationLimit: 1000,
    dataLabels: {
      enabled: false
    },
    levelIsConstant: false,
    levels: [{
      level: 1,
      dataLabels: {
        enabled: true
      },
      borderWidth: 3
    }],
    data: points
  }],
  title: {
    text: ''
  }
});

#container {
  min-width: 300px;
  max-width: 600px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

<textarea name="text" id="text" cols="30" rows="10"></textarea>

正如您所看到的，下面还有一个文本区域。

我想要的是对于图表上点击的每个级别，文本区域都会更新一些随机文本。

例如，在第一次向下钻取时，文本区域实际上可以只打印级别 1，第二次向下钻取时打印级别 2 等等。

如果有人需要我提供的任何其他信息，请告诉我。

非常感谢:)

Answer 1

您可以通过多种方式做到这一点。以下是如何使用 plotOptions.series.point.events.click 执行此操作。您需要做的是捕获点击点并渲染一些文本。由于您没有描述要显示的文本，这只会使用单击点的属性 name 和 value 更新 textarea。

  Highcharts.chart('container', {
    series: [{
      point: {
        events: {
          click: function() {
            var thePointName = this.name,
                    thePointValue = this.value;
            $('#text').val(function(_, val) {
              return 'Category: ' + thePointName + ', value: ' + thePointValue;
            });
          }
        }
      },
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
        level: 1,
        dataLabels: {
          enabled: true
        },
        borderWidth: 3
      }],
      data: points
    }],
    title: {
      text: ''
    }
  });

直播example .