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

Question

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

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

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

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

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

使用

 series: [{
              type:'bar',
              data: [10, 15, 12]
            }]

Answer 2

如果您在指令控制器中而不是在 link 函数中设置配置，它会工作并保留类别 - 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'
            }
        }
    }
}});

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

Highcharts-NG is only listening to some of my chart config options

javascript

highcharts

angularjs

highcharts-ng