├── .gitattributes
├── index.htm
└── chart.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angularchart Example
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
31 |
39 |
40 |
--------------------------------------------------------------------------------
/chart.js:
--------------------------------------------------------------------------------
1 | angular.module('AngularChart', []).directive('chart', function () {
2 | return {
3 | restrict:'E',
4 | template:'',
5 | transclude:true,
6 | replace:true,
7 | scope: '=',
8 | link:function (scope, element, attrs) {
9 | console.log('oo',attrs,scope[attrs.formatter])
10 | var opt = {
11 | chart:{
12 | renderTo:element[0],
13 | type:'line',
14 | marginRight:130,
15 | marginBottom:40
16 | },
17 | title:{
18 | text:attrs.title,
19 | x:-20 //center
20 | },
21 | subtitle:{
22 | text:attrs.subtitle,
23 | x:-20
24 | },
25 | xAxis:{
26 | //categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
27 | tickInterval:1,
28 | title:{
29 | text:attrs.xname
30 | }
31 | },
32 | plotOptions:{
33 | lineWidth:0.5
34 | },
35 | yAxis:{
36 | title:{
37 | text:attrs.yname
38 | },
39 | tickInterval:(attrs.yinterval)?new Number(attrs.yinterval):null,
40 | max:attrs.ymax,
41 | min: attrs.ymin
42 | // ,
43 | // plotLines:[
44 | // {
45 | // value:0,
46 | // width:1,
47 | // color:'#808080'
48 | // }
49 | // ]
50 | },
51 | tooltip:{
52 | formatter:scope[attrs.formatter]||function () {
53 | return '' + this.y + ''
54 | }
55 | },
56 | legend:{
57 | layout:'vertical',
58 | align:'right',
59 | verticalAlign:'top',
60 | x:-10,
61 | y:100,
62 | borderWidth:0
63 | },
64 | series:[
65 | {
66 | name:'Tokyo',
67 | data:[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
68 | }
69 | ]
70 | }
71 |
72 |
73 | //Update when charts data changes
74 | scope.$watch(function (scope) {
75 | return JSON.stringify({
76 | xAxis:{
77 | categories:scope[attrs.xdata]
78 | },
79 | series:scope[attrs.ydata]
80 | });
81 | }, function (news) {
82 | console.log('ola')
83 | // if (!attrs) return;
84 | news = JSON.parse(news)
85 | if (!news.series)return;
86 | angular.extend(opt,news)
87 | console.log('opt.xAxis.title.text',opt)
88 |
89 |
90 |
91 |
92 | var chart = new Highcharts.Chart(opt);
93 | });
94 | }
95 | }
96 |
97 | })
--------------------------------------------------------------------------------