javascript - 如何创建 4 个级别的 Highcharts 树形图

Question

我想使用 Highcharts 创建一个有 4 个级别的树形图。构建 3 个级别的树形图效果很好。这是 fiddle :https://jsfiddle.net/khsemucx/2/和截图:

var data = {
  "Species1": {
    "Organ1": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ2": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ3": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ4": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
	},
  "Species2": {
    "Organ1": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ2": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ3": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
	},
  "Species3": {
    "Organ1": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
    "Organ2": {
      "Tissue1": 3,
      "Tissue2": 3,
      "Tissue3": 3,
     },
	},
}

  var points = [],
    speciesP,
    speciesVal,
    speciesI = 0,
    sampleP,
    sampleI,
    causeP,
    causeI,
    species,
    sample,
    cause

  for (species in data) {
    if (data.hasOwnProperty(species)) {
      speciesVal = 0;
      speciesP = {
        id: 'id_' + speciesI,
        name: species,
        color: Highcharts.getOptions().colors[speciesI]
      };
      sampleI = 0;
      for (sample in data[species]) {
        if (data[species].hasOwnProperty(sample)) {
          sampleP = {
            id: speciesP.id + '_' + sampleI,
            name: sample,
            parent: speciesP.id
          };
          points.push(sampleP);
          causeI = 0;
          for (cause in data[species][sample]) {
            if (data[species][sample].hasOwnProperty(cause)) {
              causeP = {
                id: sampleP.id + '_' + causeI,
                name: cause,
                parent: sampleP.id,
                value: Math.round(+data[species][sample][cause])
              };
              speciesVal += causeP.value;
              points.push(causeP);
              causeI = causeI + 1;
            }
          }
          sampleI = sampleI + 1;
        }
      }
      speciesP.value = Math.round(speciesVal);
      points.push(speciesP);
      speciesI = speciesI + 1;
    }
  }


  Highcharts.chart('container', {
  	exporting: {
      sourceWidth: 600,
      sourceHeight: 480,
      // scale: 2 (default)
      chartOptions: {
          subtitle: null
      },
      fallbackToExportServer: false,
      buttons: { // specific options for the export button
          contextButton: {
            menuItems: ['downloadPNG', 'downloadJPEG', 'downloadSVG'],
          },
        },
    },
  	tooltip: {
      formatter: function () {
        //console.log(this)
        var value = this.point.value;
        if (value > 1) {
            return value + (' samples');
        } else {
            return false;
        }
      },
      style: {
        fontWeight: 'bold'
      },
      shared: false,
      animation: false,
      hideDelay: 200,
      delayForDisplay: 200,
      useHTML: true
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'stripes',
      layoutStartingDirection: 'vertical',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
      },
      levelIsConstant: false,
      levels: [{
      	layoutAlgorithm: 'squarified',
      	layoutStartingDirection: 'vertical',
        level: 1,
        dataLabels: {
          enabled: true,
          format: '{point.name}',
          style: {
                fontSize: '14px',
            }
        },
        borderWidth: 3
      },
      {
        level: 2,
        layoutAlgorithm: 'squarified',
        layoutStartingDirection: 'horizontal',
       },
       {
        level: 3,
        layoutAlgorithm: 'squarified',
        layoutStartingDirection: 'horizontal',
       },
       {
        level: 4,
        layoutAlgorithm: 'squarified',
        layoutStartingDirection: 'horizontal',
       }],
      data: points,
    }],
    subtitle: {
      text: 'Click points to drill down.'
    },
    title: {
      text: 'Treemap with 3 levels'
    },
    chart: {
        animation: {
            duration: 350
        }
    },
    credits: {
      enabled: false
    },
  });

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

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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>

现在我想向此树形图添加另一个级别，但不起作用:https://jsfiddle.net/36fwztsq/2/

浏览器控制台中没有显示错误，但我可以将错误追溯到这段代码:

for (species in data) {
if (data.hasOwnProperty(species)) {
  speciesVal = 0;
  speciesP = {
    id: 'id_' + speciesI,
    name: species,
    color: Highcharts.getOptions().colors[speciesI]
  };
  sampleI = 0;
  for (sample in data[species]) {
    if (data[species].hasOwnProperty(sample)) {
      sampleP = {
        id: speciesP.id + '_' + sampleI,
        name: sample,
        parent: speciesP.id
      };
      points.push(sampleP);
      causeI = 0;
      for (cause in data[species][sample]) {
        if (data[species][sample].hasOwnProperty(cause)) {
          causeP = {
            id: sampleP.id + '_' + causeI,
            name: cause,
            parent: sampleP.id,
            value: Math.round(+data[species][sample][cause])
          };
          speciesVal += causeP.value;
          points.push(causeP);

          # Something may be wrong here --->
          replI = 0;
          for (repl in data[species][sample][cause]) {
            if (data[species][sample][cause].hasOwnProperty(repl)) {
              replP = {
                id: causeP.id + '_' + replI,
                name: repl,
                parent: causeP.id,
                value: Math.round(+data[species][sample][cause][repl])
              };
              speciesVal += replP.value;
              points.push(replP);
              replI = replI + 1;
            }
          }
          # <--- 

          causeI = causeI + 1;
        }
      }
      sampleI = sampleI + 1;
    }
  }
  speciesP.value = Math.round(speciesVal);
  points.push(speciesP);
  speciesI = speciesI + 1;
 }
}

知道可能出了什么问题吗？

Answer 1

准备点数组的一段代码存在问题。

该行的结果将为 NaN -> value: Math.round(+data[species][sample][cause][])。只需删除它即可:

causeP = {
  id: sampleP.id + '_' + causeI,
  name: cause,
  parent: sampleP.id,
  // value: Math.round(+data[species][sample][cause][]) - remove it
};
// speciesVal += causeP.value; - remove it
points.push(causeP);
replI = 0;

演示:

• https://jsfiddle.net/BlackLabel/mb9ogyaw/