1

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
}});
4

2 に答える 2

4

リンク関数ではなく、ディレクティブ コントローラーで構成をセットアップすると、機能し、カテゴリが保持されます - 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'
            }
        }
    }
}});
于 2015-07-31T08:32:59.800 に答える