高分表中是否有子分鑽向下支持？

Question

我正在尋找sub sub drill在我的圖表中，以下是相同的代碼。

// Create the chart 
Highcharts.chart('container', { 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Highcharts multi-series drilldown' 
    }, 
    subtitle: { 
     text: 'Click columns to drill down to single series. Click categories to drill down both.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 

    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    series: [ 
     { 
      name: '2010', 
      data: [{ 
       name: 'Republican2', 
       y: 5, 
       drilldown: 'republican-2010' 
      }] 
     } 
    ], 
    drilldown: { 
     series: [ 
      { 
       name: 'Republican3', 
       id: 'republican-2010', 
       data: [{ 
       name: 'test', 
       y: 3, 
       drilldown: 'republican-2080' 
       }] 
      } 
     ], 
     drilldown: { 
      series: [{ 
       id: 'republican-2080', 
       data: [ 
        ['East', 4], 
        ['West', 2], 
        ['North', 1], 
        ['South', 4] 
       ] 
       }] 
     } 
    },// End Main drill down 

}); 

它工作正常，直到第一次鑽取，我跟隨主鑽取結構獲得子分鑽。 不知道，如果它通過高圖表支持，或者我做錯了什麼..

任何幫助，將撥出..

Answer 1

你可以找到

https://rahulrsingh09.github.io/AngularConcepts

相同的工作示例

下附加 - >角2個+ HighCharts

圖表組件.TS

import {Component, OnInit} from '@angular/core'; 
import {WeatherService} from "../shared/weather.service"; 

@Component({ 
    selector: 'app-charts', 
    templateUrl: './charts.component.html', 
    styleUrls: ['./charts.component.css'] 
}) 
export class ChartsComponent implements OnInit { 

    drilldown: Object; 



    constructor() { 
    } 

    ngOnInit(){ 
    this.drilldown = { 
     chart: { 
     type: 'column' 
     }, 
     title: { 
     text: 'Basic drilldown' 
     }, 
     xAxis: { 
     type: 'category' 
     }, 

     legend: { 
     enabled: false 
     }, 

     plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
      enabled: true 
      } 
     } 
     }, 

     series: [{ 
     name: 'Country', 
     colorByPoint: true, 
     data: [{ 
      name: 'India', 
      y: 2, 
      drilldown: 'india' 
     }, { 
      name: 'United Kindom', 
      y: 2, 
      drilldown: 'uk' 
     }] 
     }], 
     drilldown: { 
     series: [{ 
      name: 'Popular Destinations', 
      id: 'india', 
      data: [{ 
      name: 'WB', 
      y: 3, 
      drilldown: 'wbdes' 
      }, 
      { 
       name: 'CHD', 
       y: 2, 
       drilldown: 'chddes' 
      }] 
     }, { 
      name: 'Popular Destinations', 
      id: 'uk', 
      data: [{ 
      name: 'london', 
      y: 2, 
      drilldown: 'londondes' 
      }, 
      { 
       name: 'manchester', 
       y: 1, 
       drilldown: 'manchesterdes' 
      }] 
     }, { 
      name: 'votes', 
      id: 'londondes', 
      data: [ 
      ['Stamford Bridge', 40], 
      ['Kings Road', 2] 
      ] 
     }, 
      { 
      name: 'votes', 
      id: 'manchesterdes', 
      data: [ 
       ['Old Trafford', 4] 
      ] 
      }, 
      { 
      name: 'votes', 
      id: 'wbdes', 
      data: [ 
       ['victoria memorial', 4], 
       ['eden garden', 2], 
       ['Home', 1] 
      ] 
      }, 
      { 
      name: 'votes', 
      id: 'chddes', 
      data: [ 
       ['Sukhna Lake', 4], 
       ['Infosys', 2] 
      ] 
      }] 
     } 
    }; 

} 

} 

模板代碼

<div class="row"> 
    <div class="col-md-6"><chart [options]="drilldown"></chart></div> 
</div> 

app.module.ts

export function highchartsFactory() { 
    var hc = require('highcharts'); 
    var hcm = require('highcharts/highcharts-more'); 
    var exp = require('highcharts/modules/exporting'); 
    var drill = require('highcharts/modules/drilldown'); 

    hcm(hc); 
    exp(hc); 
    drill(hc) 
    return hc; 
} 

@NgModule({ 
providers :[ 
{ 
       provide: HighchartsStatic, 
       useFactory: highchartsFactory 
       } 
] 

})