¿Cómo integrar los gráficos de Google como una directiva AngularJs?

Mantén la atención ya que en este artículo hallarás el resultado que buscas.

Solución:

Aquí hay un buen ejemplo de un Directiva de herramientas de gráficos de Google de AngularJs en acción.

• Ejemplo plunker.

Instrucciones

Estas mismas instrucciones están en el mismo plunker.

1. Descargue ng-google-chart.js de github y agregue una etiqueta de script a su html.

2. Crea un div como:

3. Agregue ‘googlechart’ a su módulo de esta manera:

   angular.module('myApp',[ 'googlechart', ...

4. Rellenar el $scope.chart Me gusta esto:

  "type": "ColumnChart",
  "cssStyle": "height:200px; width:300px;",
  "data": 
    "cols": [
      
        "id": "month",
        "label": "Month",
        "type": "string",
        "p": 
      ,
      
        "id": "laptop-id",
        "label": "Laptop",
        "type": "number",
        "p": 
      ,
      
        "id": "desktop-id",
        "label": "Desktop",
        "type": "number",
        "p": 
      ,
      
        "id": "server-id",
        "label": "Server",
        "type": "number",
        "p": 
      ,
      
        "id": "cost-id",
        "label": "Shipping",
        "type": "number"
      
    ],
    "rows": [
      
        "c": [
          
            "v": "January"
          ,
          
            "v": 19,
            "f": "42 items"
          ,
          
            "v": 12,
            "f": "Ony 12 items"
          ,
          
            "v": 7,
            "f": "7 servers"
          ,
          
            "v": 4
          
        ]
      ,
      
        "c": [
          
            "v": "February"
          ,
          
            "v": 13
          ,
          
            "v": 1,
            "f": "1 unit (Out of stock this month)"
          ,
          
            "v": 12
          ,
          
            "v": 2
          
        ]
      ,
      
        "c": [
          
            "v": "March"
          ,
          
            "v": 24
          ,
          
            "v": 0
          ,
          
            "v": 11
          ,
          
            "v": 6
          
        ]
      
    ]
  ,
  "options": 
    "title": "Sales per month",
    "isStacked": "true",
    "fill": 20,
    "displayExactValues": true,
    "vAxis": 
      "title": "Sales unit",
      "gridlines": 
        "count": 6
      
    ,
    "hAxis": 
      "title": "Date"
    
  ,
  "formatters": ,
  "displayed": true

Como ya descubrió, puede inicializar angular en el html o la etiqueta del cuerpo, sin esperar a los gráficos de Google.

Para asegurarse de que no intente representar un gráfico antes de que el código JavaScript del gráfico de Google esté listo, tendría la directiva $ver un nuevo controlador $scope property/flag que configuró dentro de la función de devolución de llamada para google.setOnLoadCallback. Dentro de la devolución de llamada de $watch, verifique para asegurarse de que la bandera esté configurada, luego realice su inicialización.

Hay un proyecto Github que envuelve Google Charts en la directiva AngularJS

https://github.com/angular-google-chart/angular-google-chart

http://angular-google-chart.github.io/angular-google-chart/

Si guardas algún recelo y capacidad de innovar nuestro reseña eres capaz de dejar una ilustración y con gusto lo ojearemos.

---

---

Utiliza Nuestro Buscador