Question

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

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

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

我在下面列出了当前结果的照片。 [注意它不是一个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

如果您在指令控制器中而不是在链接功能中设置配置，则它可以工作并保留类别 - 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'
            }
        }
    }
}});

Answer 2

使用

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

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

2 个答案: