本文介绍了与AngularJS amCharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我还在strugling做其他的工作与库AngularJS，因为它是从其他库differtent逻辑。
我需要用形象化股票amCharts数据，但并没有什么关于这两个wroking一起在互联网上。
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.
我怎样才能使与angularjs这项工作：
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
}
});
感谢。
推荐答案
我会创造一些基本指令（分离范围），它接收图表设置和模板中使用：
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:
的（它不是根据您的设置，但你可以使用相同的流量）的
演示
指令
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
Demo 2
的 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();
}
}
});
这篇关于与AngularJS amCharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！