Javascript 带AngularJS的amCharts
我仍然在努力与AngularJS合作开发其他LIB，因为它的逻辑与其他LIB不同。 我需要用amCharts股票可视化数据，但互联网上没有关于这两种股票同时交易的信息 如何使用angularjs实现这一点：Javascript 带AngularJS的amCharts,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我仍然在努力与AngularJS合作开发其他LIB，因为它的逻辑与其他LIB不同。 我需要用amCharts股票可视化数据，但互联网上没有关于这两种股票同时交易的信息 如何使用angularjs实现这一点： 谢谢。我将创建一些基本指令（隔离范围），用于接收图表设置并用作模板： <div id="container"></div> 此外，我们可以编写几个观察者来监听用户操作 下面是如何使用它的工作示例： （它不基于您的设置，但您可以使用相同的流） 演示 指令 mya
谢谢。我将创建一些基本指令（隔离范围），用于接收图表设置并用作模板：
<div id="container"></div>
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
}
}) ;
myapp.directive（'myElem'，
函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
配置：'='
},
模板：“”，
链接：函数（范围、元素、属性）{
var图=假；
var initChart=函数（）{
if（chart）chart.destroy（）；
var config=scope.config | |{}；
图表=新的Highcharts.chart（配置）；
if（config.loading）{
chart.showLoading（）；
}
};
initChart（）；
作用域$watch（'config.loading'，函数（loading）{
如果（装载）{
chart.showLoading（）；
}否则{
chart.hideLoading（）；
}
});
作用域.$watch（'config.series[0].type'，函数（type）{
chart.series[0]。更新（{type:type}）；
});
作用域.$watch（'config.series[0].dataLabels.enabled'，函数（enableDataLabels）{
chart.series[0]。更新（{dataLabels:{enabled:enableDataLabels}）；
});
}//了望台
}
}) ;
<my-elem config="chartConfig"> </my-elem>
var myapp=angular.module（'myModule'，[]）；
myapp.指令（“MyLem”，
函数（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
var图=假；
var initChart=函数（）{
if（chart）chart.destroy（）；
var config=scope.config | |{}；
chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“无”，
“marginLeft”：20，
“路径图像”：http://www.amcharts.com/lib/3/images/",
“数据提供者”：[{
“年份”：“1950年”，
“价值”：-0.307
}, {
“年份”：“1951年”，
“值”：-0.168
}, {
“年份”：“1952年”，
“值”：-0.073
}, {
“年份”：“1953年”，
“值”：-0.027
}, {
“年份”：“1954年”，
“价值”：-0.251
}, {
“年份”：“1955年”，
“价值”：-0.281
}, {
“年份”：“1956年”，
“价值”：-0.348
}, {
“年份”：“1957年”，
“值”：-0.074
}, {
“年份”：“1958年”，
“值”：-0.011
}, {
“年份”：“1959年”，
“值”：-0.074
}, {
“年份”：“1960年”，
“价值”：-0.124
}, {
“年份”：“1961年”，
“值”：-0.024
}, {
“年份”：“1962年”，
“值”：-0.022
}, {
“年份”：“1963年”，
“值”：0
}, {
“年份”：“1964年”，
“价值”：-0.296
}, {
“年份”：“1965年”，
“价值”：-0.217
}, {
“年份”：“1966年”，
“价值”：-0.147
}, {
“年份”：“1967年”，
“价值”：-0.15
}, {
“年份”：“1968年”，
“价值”：-0.16
}, {
“年份”：“1969年”，
“值”：-0.011
}, {
“年份”：“1970年”，
“值”：-0.068
}, {
“年份”：“1971年”，
“价值”：-0.19
}, {
“年份”：“1972年”，
“值”：-0.056
}, {
“年份”：“1973年”，
“价值”：0.077
}, {
“年份”：“1974年”，
“价值”：-0.213
}, {
“年份”：“1975年”，
“价值”：-0.17
}, {
“年份”：“1976年”，
“值”：-0.254
}, {
“年份”：“1977年”，
“值”：0.019
}, {
“年份”：“1978年”，
“值”：-0.063
}, {
“年份”：“1979年”，
“价值”：0.05
}, {
“年份”：“1980年”，
“价值”：0.077
}, {
“年份”：“1981年”，
“价值”：0.12
}, {
“年份”：“1982年”，
“价值”：0.011
}, {
“年份”：“1983年”，
“价值”：0.177
}, {
“年份”：“1984年”，
“值”：-0.021
}, {
<my-elem config="chartConfig"> </my-elem>
<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();
}
}
});