Rendering di diagrammi elevati utilizzando le direttive js angolari

Question

Sono nuovo in Angular JS e sto provando a eseguire il rendering dei miei diagrammi elevati (linea di base) creando una direttiva. Per favore dimmi l'approccio che dovrei seguire qui. Qualsiasi aiuto sarebbe apprezzato.

Ecco il mio script per il 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> 

Answer 1

Esempio di grafico a torta:

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

    } 
    } 
}); 

Answer 2

Alternativa applicazione qui: http://jsfiddle.net/pablojim/Cp73s/

Questo utilizza https://github.com/pablojim/highcharts-ng

Ciò consente di creare un highchart con l'html indicato qui:

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

Nel caso di cui sopra chart.series è un array di oggetti JavaScript che rappresentano la serie sul grafico - queste hanno opzioni Highcharts standard. Questi vengono quindi guardati da angularjs per eventuali modifiche.

chart.options è l'opzione di inizializzazione dei grafici ad alta risoluzione, anche per le modifiche. Sebbene le modifiche apportate a questo ricreano l'intero grafico.

chart.title è l'oggetto titolo di grafici ad alta percentuale, anche per le modifiche.

Answer 3

app.directive('hcChart', function() { 
 
\t return { 
 
\t \t \t restrict: 'A', 
 
\t \t \t template: '<div></div>', 
 
\t \t \t scope: { 
 
\t \t \t \t \t options: '=' 
 
\t \t \t \t }, 
 
\t \t \t link: function (scope , element, attribute) { 
 
       Highcharts.chart('chart', { 
 
       \t 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] 
 
        }] 
 
       }); 
 
\t \t \t } 
 
\t } 
 
\t \t \t 
 
});

<div id="chart" hc-chart>Placeholder for generic chart</div>

Assicurarsi lib highchart viene aggiunto nel vostro index.html