Javascript 使用AngularJS组件基于类型渲染图表

我在与Angularjs 1.6结合使用Highcharts时遇到了一个非常奇怪的问题。我使用组件根据图表类型渲染图形。这是我的json数据的一个示例：

 "Widgets":[  
  {  
     "Id":1,
     "description":"Test test",
     "datasource":"Risk",
     "charttype":"Bar",
     "x":0,
     "y":0,
     "width":3,
     "height":2
  },
  {  
     "Id":2,
     "description":"test test 2",
     "datasource":"KRI",
     "charttype":"Area",
     "x":3,
     "y":0,
     "width":3,
     "height":2
  },
  {  
     "Id":3,
     "description":"Some cool data",
     "datasource":"KRI",
     "charttype":"Heatmap",
     "x":6,
     "y":0,
     "width":3,
     "height":2
  }
]

基于Charttype我想渲染图表，我正在使用角度组件。这是条形图的角度分量：

angular.module("generalApp").component("chartType", {
template: "<div class=Bar></div>",
bindings: {
    data: "=",
    charttype: "="
},
controller: function () {
  $('.Bar').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    })
} 
});

当我只使用一个图表时，它工作正常，但当我使用一个多于一个的组件时，我在控制台中遇到以下错误

有人能给我指一下正确的方向吗

---

亲切问候

问题似乎在于您的所有组件都是使用名称

chartType

注册的。 它们都应该有一个唯一的名称，例如：

BarComponent

和

AreaComponent

在容器模板中，可以包含所有图表类型组件。通过控制流指令，您可以指定应该向用户显示的组件。例如：

<div ng-switch="currentComponent">
  <area-component ng-switch-when="area"></area-component>
  <bar-component ng-switch-when="bar"></bar-component>
  <div ng-switch-default>Please select a chart type</div>
</div>

请选择图表类型

<chart-type data="w.datasource" charttype="w.charttype"></chart-type>

ng-repeat="w in dashboard.Widgets track by $index"

<div ng-switch="currentComponent">
  <area-component ng-switch-when="area"></area-component>
  <bar-component ng-switch-when="bar"></bar-component>
  <div ng-switch-default>Please select a chart type</div>
</div>