web-dev-qa-db-fra.com

Rendu des Highcharts en utilisant Angular Directives js

Je suis nouveau sur Angular JS et j'essaie de rendre mes graphiques en haut (Basic Line) en créant une directive. Merci de me dire quelle approche je devrais suivre ici. Toute aide serait la bienvenue.

Voici mon script pour les highcharts:

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


    </script>
angularjshighcharts
47
user2260137

Exemple de camembert:

http://jsfiddle.net/csTzc/

    function MyCtrl($scope, limitToFilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedIdeas = limitToFilter($scope.ideas, 2);
}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart(options);
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});
50
Sebastian Bochan

Implémentation alternative ici: http://jsfiddle.net/pablojim/Cp73s/

Ceci utilise https://github.com/pablojim/highcharts-ng

Cela vous permet de créer un highchart avec le code HTML ci-dessous:

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

Dans le cas ci-dessus chart.series est un tableau d’objets javascript représentant les séries sur le graphique - ils utilisent les options Highcharts standard. Celles-ci sont ensuite surveillées par angularjs pour tout changement.

chart.options sont les options d’initalisation des graphiques en haut - également surveillées pour les changements. Bien que les modifications apportées à cette recréer le graphique entier.

chart.title est l’objet de titre de Highcharts - également surveillé pour les changements.

30
Pablojim
app.directive('hcChart', function () {
        return {
                        restrict: 'A',
                        template: '<div></div>',
                        scope: {
                                        options: '='
                                },
                        link: function (scope , element, attribute) {
                Highcharts.chart('chart', {
                         chartOptions: {
                         type: 'line'
                    },
                     
                     title: {
                        text: 'Temperature data'
                     },
                 series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                     }]
                });
                        }
        }
                        
});
<div id="chart" hc-chart>Placeholder for generic chart</div>
1
Puja Singh