javascript – amCharts with AngularJS

发布时间:2020-03-24 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了javascript – amCharts with AngularJS脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我仍然在使用AngularJS进行其他libs的工作,因为与其他libs不同的逻辑.
我需要使用amCharts库可视化数据,但互联网上没有关于这两个错配在一起的事情.

我如何使用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
            }],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"
        },count: 5,label: "5 hour"
        },count: 12,label: "12 hours"
        },{
            period: "MAX",label: "MAX"
        }]
    },panelsSettings: {
        usePrefixes: true
    }
});

谢谢.

解决方法

我将创建一些接收图表设置并用作模板的基本指令(隔离范围):
<div id="container"></div>

此外,我们可以编写几个观察者来监听用户操作.

这里是工作示例如何使用它:

(它不是基于您的设置,但您可以使用相同的流程)

演示Fiddle

指示

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

       }
   }) ;

用法:

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

[编辑]

演示2 FIddle

HTML

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

JS

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

myapp.directive('myElem',template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',attrs) {

                var chart = false;

                var initChart = function() {
                  if (chart) chart.destroy();
                  var config = scope.config || {};
                   chart = AmCharts.makeChart("chartdiv",{
                "type": "serial","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",{
                    "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",{
                    "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",{
                    "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();

           }         
       }
   });

总结

以上是脚本之家为你收集整理的javascript – amCharts with AngularJS全部内容,希望文章能够帮你解决javascript – amCharts with AngularJS所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: