amCharts with AngularJS

坚强是说给别人听的谎言 提交于 2019-12-17 19:16:30

问题


I'm still strugling making work other libs with AngularJS because of it's differtent logic from other libs. I need to visualize data with amCharts Stock, but there is nothing on the internet about these two wroking together.

How can i make this work with 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
    }
});

Thanks.


回答1:


I would create some basic directive (isolate scope) that receives chart settings and use as template:

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

In addition we can write several watchers to listen on user actions.

Here is working example How to use it:

(Its not based on your settings but you can use the same flow)

Demo Fiddle

Directive

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

       }
   }) ;

The usage:

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

[EDIT]

Demo 2 FIddle

HTML

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

JS

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

           }         
       }
   });



回答2:


Use the module https://github.com/natanielpaiva/angularAmChart

or

project example https://github.com/natanielpaiva/angularAmChartSimples

Simple:

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

In Javascript:

$scope.objectLiveAmchart = { type:serial, ... }




回答3:


I fount that the solution provided wasn't working for me.

In particular, the chart was not showing if the id in the template wasn't hardcoded.

It seemed like a problem with the AmCharts.makeChart() function that was't able to find the chardiv_idin the DOM.

I found that putting the initChart()function inside a scope.$watch('element') (after attaching elementto the scope in the linking function) was the right solution for me.

I think this is because after the element is created (so after the watch is called) is present and visible in the DOM, so the AmChart function can see it and render the chart correctly.

Hope this helped someone!



来源:https://stackoverflow.com/questions/23009890/amcharts-with-angularjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!