Highcharts-NG прослушивает только некоторые параметры конфигурации моего графика.

Я пытаюсь использовать highcharts-ng в своем угловом приложении. Я никогда не использовал высокие графики, которые причиняют мне некоторую боль...

Я пытаюсь создать директиву для своих диаграмм. Я понимаю, что диаграмма уже является директивой, но я хочу поместить ее в директиву, чтобы мне было легче загружать в них данные из моей базы данных, поскольку у меня будет несколько на странице.

Диаграмма показывает правильные данные, но в виде линейной диаграммы, а не гистограммы. Переменная высоты не переводится на диаграмму.

Я включил фото текущих результатов ниже. [Обратите внимание, что это не гистограмма высотой 100 пикселей.]

Неправильный материалff

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

javascript angularjs highcharts highcharts-ng
person Chris Chevalier    schedule 30.07.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Если вы настроили конфигурацию в контроллере директив, а не в функции ссылки, она работает и сохраняет категории - см. 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'
            }
        }
    }
}});
person sheilak    schedule 31.07.2015
comment
Да, это должно быть какое-то странное вмешательство между ними. Это отлично работает, и для тех, кто интересуется, вы можете использовать функцию ссылки и контроллер директивы в одной и той же директиве. - person Chris Chevalier; 31.07.2015

arrow_upward
2
arrow_downward

использовать

 series: [{
              type:'bar',
              data: [10, 15, 12]
            }]
person Mathias F    schedule 30.07.2015
comment
Большое спасибо. Это работает, но теряет мои метки по оси X [код] категории: ['a','b','c'] [/code] - person Chris Chevalier; 31.07.2015