amCharts mit AngularJS

Ich bin immer noch strugling Arbeit, die anderen libs mit AngularJS, weil es differtent Logik aus anderen Bibliotheken.
Ich brauche zur Visualisierung von Daten mit amCharts Lager, aber es ist nichts im internet über diese zwei wroking zusammen.

Wie kann ich machen das arbeiten mit angularjs: http://jsfiddle.net/922JW/

 var chart = AmCharts.makeChart("chartdiv", {

    type: "stock",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

    categoryAxesSettings: {
        minPeriod: "mm"
    },

    dataSets: [{
        color: "#b0de09",
        fieldMappings: [{
            fromField: "value",
            toField: "value"
        }, {
            fromField: "volume",
            toField: "volume"
        }],

        dataProvider: chartData,
        categoryField: "date"
    }],


    panels: [{
            showCategoryAxis: false,
            title: "Value",
            percentHeight: 70,

            stockGraphs: [{
                id: "g1",
                valueField: "value",
                type: "smoothedLine",
                lineThickness: 2,
                bullet: "round"
            }],


            stockLegend: {
                valueTextRegular: " ",
                markerType: "none"
            }
        },

        {
            title: "Volume",
            percentHeight: 30,
            stockGraphs: [{
                valueField: "volume",
                type: "column",
                cornerRadiusTop: 2,
                fillAlphas: 1
            }],

            stockLegend: {
                valueTextRegular: " ",
                markerType: "none"
            }
        }
    ],

    chartScrollbarSettings: {
        graph: "g1",
        usePeriod: "10mm",
        position: "top"
    },

    chartCursorSettings: {
        valueBalloonsEnabled: true
    },

    periodSelector: {
        position: "top",
        dateFormat: "YYYY-MM-DD JJ:NN",
        inputFieldWidth: 150,
        periods: [{
            period: "hh",
            count: 1,
            label: "1 hour",
            selected: true

        }, {
            period: "hh",
            count: 2,
            label: "2 hours"
        }, {
            period: "hh",
            count: 5,
            label: "5 hour"
        }, {
            period: "hh",
            count: 12,
            label: "12 hours"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    },

    panelsSettings: {
        usePrefixes: true
    }
});

Dank.

InformationsquelleAutor Jack | 2014-04-11

Ich würde einige der grundlegenden Richtlinie (isolieren Geltungsbereich) erhält, dass die chart-Einstellungen und als Vorlage verwenden:

 <div id="container"></div>

Zusätzlich können wir schreiben mehrere Beobachter zu hören, das auf Aktionen des Nutzers.

Hier ist Beispiel Wie man es verwendet:

(Es ist keine basierend auf Ihren Einstellungen, aber Sie können die gleiche Strömung)

Demo Fiddle

Richtlinie

myapp.directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,
            scope: {
            config: '='  
           },
           template: '<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
           link: function (scope, element, attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                  chart = new Highcharts.Chart(config);


                  if(config.loading) {
                    chart.showLoading();
                  }

                };
                initChart();

        scope.$watch('config.loading', function (loading) {
          if(loading) {
            chart.showLoading();
          } else {
            chart.hideLoading();
          }
        });

       scope.$watch('config.series[0].type', function (type) {        
         chart.series[0].update({type: type});       
        });

        scope.$watch('config.series[0].dataLabels.enabled', function (enableDataLabels) {          
         chart.series[0].update({dataLabels: {enabled: enableDataLabels}});       
        });                
         }//end watch

       }
   }) ;

Die Verwendung:

 <my-elem config="chartConfig"> </my-elem>

[BEARBEITEN]

Demo 2 FIddle

HTML

<div>     
    <my-elem ></my-elem>    
</div>

    var myapp = angular.module('myModule', []);

myapp.directive('myElem',
   function () {
       return {
           restrict: 'E',
           replace:true,

           template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
           link: function (scope, element, attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                   chart = AmCharts.makeChart("chartdiv", {
                "type": "serial",
                "theme": "none",
                "marginLeft": 20,
                "pathToImages": "http://www.amcharts.com/lib/3/images/",
                "dataProvider": [{
                    "year": "1950",
                    "value": -0.307
                }, {
                    "year": "1951",
                    "value": -0.168
                }, {
                    "year": "1952",
                    "value": -0.073
                }, {
                    "year": "1953",
                    "value": -0.027
                }, {
                    "year": "1954",
                    "value": -0.251
                }, {
                    "year": "1955",
                    "value": -0.281
                }, {
                    "year": "1956",
                    "value": -0.348
                }, {
                    "year": "1957",
                    "value": -0.074
                }, {
                    "year": "1958",
                    "value": -0.011
                }, {
                    "year": "1959",
                    "value": -0.074
                }, {
                    "year": "1960",
                    "value": -0.124
                }, {
                    "year": "1961",
                    "value": -0.024
                }, {
                    "year": "1962",
                    "value": -0.022
                }, {
                    "year": "1963",
                    "value": 0
                }, {
                    "year": "1964",
                    "value": -0.296
                }, {
                    "year": "1965",
                    "value": -0.217
                }, {
                    "year": "1966",
                    "value": -0.147
                }, {
                    "year": "1967",
                    "value": -0.15
                }, {
                    "year": "1968",
                    "value": -0.16
                }, {
                    "year": "1969",
                    "value": -0.011
                }, {
                    "year": "1970",
                    "value": -0.068
                }, {
                    "year": "1971",
                    "value": -0.19
                }, {
                    "year": "1972",
                    "value": -0.056
                }, {
                    "year": "1973",
                    "value": 0.077
                }, {
                    "year": "1974",
                    "value": -0.213
                }, {
                    "year": "1975",
                    "value": -0.17
                }, {
                    "year": "1976",
                    "value": -0.254
                }, {
                    "year": "1977",
                    "value": 0.019
                }, {
                    "year": "1978",
                    "value": -0.063
                }, {
                    "year": "1979",
                    "value": 0.05
                }, {
                    "year": "1980",
                    "value": 0.077
                }, {
                    "year": "1981",
                    "value": 0.12
                }, {
                    "year": "1982",
                    "value": 0.011
                }, {
                    "year": "1983",
                    "value": 0.177
                }, {
                    "year": "1984",
                    "value": -0.021
                }, {
                    "year": "1985",
                    "value": -0.037
                }, {
                    "year": "1986",
                    "value": 0.03
                }, {
                    "year": "1987",
                    "value": 0.179
                }, {
                    "year": "1988",
                    "value": 0.18
                }, {
                    "year": "1989",
                    "value": 0.104
                }, {
                    "year": "1990",
                    "value": 0.255
                }, {
                    "year": "1991",
                    "value": 0.21
                }, {
                    "year": "1992",
                    "value": 0.065
                }, {
                    "year": "1993",
                    "value": 0.11
                }, {
                    "year": "1994",
                    "value": 0.172
                }, {
                    "year": "1995",
                    "value": 0.269
                }, {
                    "year": "1996",
                    "value": 0.141
                }, {
                    "year": "1997",
                    "value": 0.353
                }, {
                    "year": "1998",
                    "value": 0.548
                }, {
                    "year": "1999",
                    "value": 0.298
                }, {
                    "year": "2000",
                    "value": 0.267
                }, {
                    "year": "2001",
                    "value": 0.411
                }, {
                    "year": "2002",
                    "value": 0.462
                }, {
                    "year": "2003",
                    "value": 0.47
                }, {
                    "year": "2004",
                    "value": 0.445
                }, {
                    "year": "2005",
                    "value": 0.47
                }],
                "valueAxes": [{
                    "axisAlpha": 0,
                    "inside": true,
                    "position": "left",
                    "ignoreAxisWidth": true
                }],
                "graphs": [{
                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                    "bullet": "round",
                    "bulletSize": 6,
                    "lineColor": "#d1655d",
                    "lineThickness": 2,
                    "negativeLineColor": "#637bb6",
                    "type": "smoothedLine",
                    "valueField": "value"
                }],
                "chartScrollbar": {},
                "chartCursor": {
                    "categoryBalloonDateFormat": "YYYY",
                    "cursorAlpha": 0,
                    "cursorPosition": "mouse"
                },
                "dataDateFormat": "YYYY",
                "categoryField": "year",
                "categoryAxis": {
                    "minPeriod": "YYYY",
                    "parseDates": true,
                    "minorGridAlpha": 0.1,
                    "minorGridEnabled": true
                }
            });


                };
                initChart();

           }         
       }
   });

Ich habe versucht mit einem einfachen Diagramm: jsfiddle.net/KjbaM/1, aber kann nicht damit es funktioniert. Es basiert auf der jsfiddle: jsfiddle.net/DwZ4a
weil es noch nicht geladen eckig (Modul). Dies ist ein Grund, warum Sie nichts sehen
Dies ist mein Beispiel arbeiten (kopieren/einfügen) basierend auf Ihren link: jsfiddle.net/9YnpS/38
Ok, das hat mir sehr geholfen. Danke.
Wie auch immer, ich schlage vor, Sie tun nicht schwer-code Mangold-Daten in die Richtlinie. Machen ist als Vorlage, die Sie verwenden können, die gleiche Richtlinie, die in anderen Projekten. Bringen Sie einfach es aus dem controller, wie gezeigt, im 1. Beispiel.

InformationsquelleAutor Maxim Shoustin

1

Verwenden Sie das Modul
https://github.com/natanielpaiva/angularAmChart

oder

Projekt-Beispiel
https://github.com/natanielpaiva/angularAmChartSimples

Einfach:

<amchart ng-model="objectLiveAmchart"> </amchart>

In Javascript:

$Umfang.objectLiveAmchart = { type:Seriell, ... }

InformationsquelleAutor Nataniel Paiva
0

Ich Quelle, dass die vorgesehene Lösung nicht für mich arbeiten.

Insbesondere die Grafik wurde nicht angezeigt, wenn die id in der Vorlage war nicht hardcoded.

Schien es wie ein problem mit der AmCharts.makeChart() Funktion, war nicht in der Lage zu finden, die chardiv_idim DOM.

Ich gefunden, dass die Inbetriebnahme der initChart()Funktion innerhalb einer scope.$watch('element') (nach dem anbringen elementzu dem Bereich, in dem der linking-Funktion) war die richtige Lösung für mich.

Ich denke, das ist, weil nach der element erstellt wird (also nach der Uhr genannt) vorhanden ist und sichtbar in den DOM, so die AmChart Funktion sehen kann und Rendern des Diagramms korrekt.

Hoffe, dies geholfen!

InformationsquelleAutor Giacomo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.