개발

[D3] angularjs에서 사용하는 nvd3 설정옵션

지승준 2016. 6. 3. 10:32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
chart: {
    type: 'lineChart',  //차트종류
    
    margin : {          //차트 내부 마진
        top: 20,
        right: 20,
        bottom: 60,
        left: 50
    },
 
    x: function(d){ return new Date(d[0]); },   //X축 데이터 (날짜인경우 new Date 사용)
    y: function(d){ return d[1]; },             //Y축 데이터
 
    useInteractiveGuideline: true,              //하단 그래프와 동일선상 데이터 표시
  
    showValues: true,                   //그래프에 Value 표시여부
    valueFormat: function(d){
        return d3.format(',')(d);       //Value 표시 형태 (숫자타입)
    },
 
    xAxis: {
        axisLabel: '날짜 (일)',         //X축 텍스트
        rotateLabels: -45,              //텍스트 회전
        tickFormat: function(d){
            return d3.time.format('%Y/%m/%d')(new Date(d)) //텍스트 표시 형태 (날짜타입)
        },
    },
 
    yAxis: {
        axisLabel: '설치 (건)',
        tickFormat: function(d){
            return d3.format(',')(d);   //텍스트 표시 형태 (숫자타입)
        },
        axisLabelDistance: -10          //라벨거리
    },
 
    "title": {
        "enable"true//상단 제목 유무
        "text""Title for Line Chart"  //상단 제목 텍스트
      },
      "subtitle": {
        "enable"true//상단 서브 내용 유무
        "text""Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.",
        "css": {
          "text-align""center",
          "margin""10px 13px 0px 7px"
        }
      },
      "caption": {
        "enable"true//하단 내용
        "html""<b>Figure 1.</b> Lorem ipsum dolor sit amet, at eam blandit sadipscing, <span style=\"text-decoration: underline;\">vim adhuc sanctus disputando ex</span>, cu usu affert alienum urbanitas. <i>Cum in purto erat, mea ne nominavi persecuti reformidans.</i> Docendi blandit abhorreant ea has, minim tantas alterum pro eu. <span style=\"color: darkred;\">Exerci graeci ad vix, elit tacimates ea duo</span>. Id mel eruditi fuisset. Stet vidit patrioque in pro, eum ex veri verterem abhorreant, id unum oportere intellegam nec<sup>[1, <a href=\"https://github.com/krispo/angular-nvd3\" target=\"_blank\">2</a>, 3]</sup>.",
        "css": {
          "text-align""justify",
          "margin""10px 13px 0px 7px"
        }
    }
}
cs