Highcharts - 向大型树形图添加更多钻取

Question

我有这个示例Highchart：https://jsfiddle.net/nfzyzmo0/1/

我希望得到额外的钻取工作，但我有点卡住了。

我尝试使用格式化的示例数据 - https://projectec-edbbb.firebaseio.com/Cars.json - 基本上向图表添加额外的向下钻取。

这是我到目前为止所做的，但我不知道如何让它发挥作用：

＆＃13;

＆＃13;

var url = 'https://projectec-edbbb.firebaseio.com/Cars.json';
    $.getJSON(url,
      function(data) {
    
      var points = [],
      categoryPoints,
      categoryVal,
      categoryI = 0,
      manufacturerPoints,
      manufacturerI,
      modelPoints,
      modelI,
      specificationsPoints,
      specificationsI,
      category,
      manufacturer,
      model,
      specifications,
      specificationsName = {
          'Mileage': 'Mileage',
      };

for (category in data) {
    if (data.hasOwnProperty(category)) {
        categoryVal = 0;
        categoryPoints = {
            id: 'id_' + categoryI,
            name: category,
            color: Highcharts.getOptions().colors[categoryI]
        };

        manufacturerI = 0;
        for (manufacturer in data[category]) {
            if (data[category].hasOwnProperty(manufacturer)) {
                manufacturerPoints = {
                    id: categoryPoints.id + '_' + manufacturerI,
                    name: manufacturer,
                    parent: categoryPoints.id
                };
                points.push(manufacturerPoints);

                modelI = 0;
                for (model in data[category][manufacturer]) {
                    if (data[category][manufacturer].hasOwnProperty(model)) {
                        modelPoints = {
                            id: manufacturer.id + '_' + modelI,
                            name: model,
                            parent: manufacturerPoints.id
                        };
                        points.push(modelPoints);

                specificationsI = 0;
                for (specifications in data[category][manufacturer][model]) {
                    if (data[category][manufacturer][model].hasOwnProperty(specifications)) {
                        specificationsPoints = {
                            id: model.id + '_' + specificationsI,
                            name: specificationsName[specifications],
                            parent: modelPoints.id,
                            value: Math.round(+data[category][manufacturer][model][specifications])
                        };
                        categoryVal += specificationsPoints.value;
                        points.push(specificationsPoints);
                        modelI = modelI + 1;
                    }
                }
                    }
                }
                manufacturerI = manufacturerI + 1;
            }
        }
        categoryPoints.value = Math.round(categoryVal / manufacturerI);
        points.push(categoryPoints);
        categoryI = categoryI + 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: ''
    }
});
});

＆＃13;

  #container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script> 
  <script src="https://code.highcharts.com/highcharts-more.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>

＆＃13;

＆＃13;

＆＃13;

如果有人能提供帮助，我真的很感激！

非常感谢！:)

Answer 1

我刚尝试删除id: manufacturer.id + '_' + modelI并将其替换为id: manufacturer + '_' + modelI，因为该ID不存在且模型相同。应该工作。

Please see Plunkr example