javascript - Highcharts-NG 只听我的一些图表配置选项

Question

我正在尝试在我的 Angular 应用程序中使用 highcharts-ng。我从来没有使用过 Highcharts ，这让我有些痛苦......

我正在尝试为我的图表创建指令。我知道图表已经是一个指令，但我希望将它放在一个指令中，这样我就可以更轻松地将数据从我的数据库加载到它们中，因为我每页都有几个。

图表显示了正确的数据，但显示为折线图而不是条形图。高度变量完全没有转化为图表。

我在下面附上了当前结果的照片。 [注意它不是 100px 高的条形图]

angular.module('app').directive('forcastChart', function () {
return {
    restrict:'E',
    scope: {},
    templateUrl: '<highchart config="chartConfig"></highchart>',

    link: function ($scope, element, attrs) {

        $scope.title="CHAFRT?"

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            }, 
            series: [{
                showInLegend: false,
                data: [10, 15, 12]
            }],
            xAxis: [{
                categories: ['a','b','c']
            }], 
            size: {
               height: 100
            },
            title: {
                text: null  
            },
            loading: false,
            chart: {
                type: 'columns'
            }
        }
    }//end of link
}});

Answer 1

如果您在指令 Controller 中而不是在链接函数中设置配置，它会起作用并保留类别 - see fiddle .不知道为什么，我想这与 highcharts-ng 库如何与父指令范围交互有关。

angular.module('app', ['highcharts-ng']).directive('forcastChart', function () {
return {
    restrict:'E',
    scope: {},
    template: '<highchart config="chartConfig"></highchart>',

    controller: function($scope, $element){
       $scope.title="CHAFRT?"

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            }, 
            series: [{
                showInLegend: false,
                data: [10, 15, 12]
            }],
            xAxis: [{
                categories: ['a','b','c']
            }], 
            size: {
               height: 100
            },
            title: {
                text: null  
            },
            loading: false,
            chart: {
                type: 'columns'
            }
        }
    }
}});