Highcharts - Treemap数据点限制

时间:2017-05-30 11:26:08

标签: angularjs highcharts

我尝试通过调用REST API来加载超过1000个数据点。但是当数据点超过1000时,数据点将不会加载(显示白色图表)。我尝试使用turboThreshold但未成功。对此有何解决方案?以下是我的代码。

var data = {
          'TotalSales': {
                'Cat1': {
                    'Subcat1':{
                        'Prod1': '200',
                        'Prod2': '500',
                        'Prod3': '300'
                    },
                    'Subcat2':{
                      'Prod1': '400',
                      'Prod2': '100',
                      'Prod3': '600'
                    } 
                },
             'Cat2': {
                    'Subcat1':{
                      'Prod1': '200',
                      'Prod2': '500',
                      'Prod3': '300'
                    },
                    'Subcat2':{
                      'Prod1': '400',
                      'Prod2': '100',
                      'Prod3': '600'
                    }   
                },
            'Cat3': {
              'Subcat1':{
                'Prod1': '100',
                'Prod2': '200',
                'Prod3': '300'
              }
            },
            'Cat4': {
              'Subcat1':{
                'Prod1': '100',
                'Prod2': '200',
                'Prod3': '300'
              }
            },
            'Cat5': {
                'Subcat1':{
                  'Prod1': '200',
                  'Prod2': '500',
                  'Prod3': '300'
                },
              'Subcat2':{
                  'Prod1': '400',
                  'Prod2': '100',
                  'Prod3': '600'
              }   
            }
          }
        },
        points = [],
        allP,
        allVal,
        allI = 0,
        catP,
        catI,
        subcatP,
        subcatI,
        prodP,
        prodI,
        all,
        cat,
        subcat,
        prod,
        prodName = {
            'Prod1': 'Product1',
            'Prod2': 'Product2',
            'Prod3': 'Product3'
        };

for (all in data) {
    if (data.hasOwnProperty(all)) {
        allVal = 0;
        allP = {
            id: 'id_' + allI,
            name: all,
            color: "green"
        };
        catI = 0;
        for (cat in data[all]) {
            if (data[all].hasOwnProperty(cat)) {
                catP = {
                    id: allP.id + '_' + catI,
                    name: cat,
                    parent: allP.id,
                    color: "blue"
                    //color: Highcharts.getOptions().colors[catI]
                };
                points.push(catP);
                subcatI = 0;
                for (subcat in data[all][cat]) {
                        if (data[all][cat].hasOwnProperty(subcat)) {
                            subcatP = {
                              id: catI+ '_' + subcatI,
                              name: subcat,
                              //color: Highcharts.getOptions().colors[subcatI],
                              color: "yellow",
                              parent: catP.id
                          };
                          points.push(subcatP);
                          prodI = 0;
                            for (prod in data[all][cat][subcat]) {
                                if (data[all][cat][subcat].hasOwnProperty(prod)) {
                                    prodP = {
                                          id: subcatP.id + '_' + prodI,
                                          //name: prodName[prod],
                                          name : prod,
                                          parent: subcatP.id,
                                          //color: Highcharts.getOptions().colors[prodI],
                                          color: "red",
                                          value: Math.round(data[all][cat][subcat][prod])
                                    };
                                    allVal += prodP.value;
                                    points.push(prodP);
                                    prodI = prodI + 1;
                                }
                            }
                        subcatI = subcatI + 1;
                        }
                }
                catI = catI + 1;
            }
        }
        allP.value = Math.round(allVal);
        points.push(allP);
        allI = allI + 1;
    }
}

Highcharts.chart('container', {
    plotOptions: {
                        series: {
                          turboThreshold: 0 // Comment out this code to display error
                        }
                    },
                    series: [{
                            type: 'treemap',
                            layoutAlgorithm: 'squarified',
                            //layoutAlgorithm: 'sliceAndDice',
                            allowDrillToNode: true,
                            //animationLimit: 1500,
                            dataLabels: {
                                enabled: false
                            },
                            levelIsConstant: false,
                            levels: [{
                                level: 1,
                                //layoutAlgorithm: 'sliceAndDice',
                                dataLabels: {
                                    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'
    }
});

请找到我的JSFiddle

0 个答案:

没有答案