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

Question

我和Highcharts结合使用Angularjs 1.6时遇到了一个非常奇怪的问题。我正在使用组件根据图表类型呈现图形。这是我的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]
        }]
    })
} 
});

这是我的Area图表的一个组件

angular.module("generalApp").component("chartType", {
template: "<div class=Area></div>",
bindings: {
    data: "=",
    charttype: "="
},
controller: function () {
    $('.Area').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        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]
        }]
    });
}
});

在HTML页面上，我使用自定义标记来使用该组件：

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

我想在小部件上绑定图表类型，并基于它必须呈现图表：

条件

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

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

有人能指出我正确的方向吗？

亲切的问候

Answer 1

似乎问题是所有组件都使用名称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>