Combo

차트 라이브러리 사용법

  • 메소드 체이닝 방식으로 각 옵션에 필요한 정보를 입력한다.
  • 차트 유형 선택 : d3.daisy.layout.combo()
  • 컨테이너 선택 : .container('#content')
    …
기본데이터셋
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
var dataset = [
        {"x": 0, "y": 50, "z": 50, "c":"blue"}, {"x": 0, "y": 55, "z": 44, "c":"orange"},
        {"x": 1, "y": 43, "z": 23, "c":"blue"}, {"x": 1, "y": 20, "z": 20, "c":"orange"},
        {"x": 2, "y": 81, "z": 81, "c":"blue"}, {"x": 2, "y": 53, "z": 29, "c":"orange"},
        {"x": 3, "y": 19, "z": 19, "c":"blue"}, {"x": 3, "y": 87, "z": 87, "c":"orange"},
        {"x": 4, "y": 52, "z": 52, "c":"blue"}, {"x": 4, "y": 48, "z": 43, "c":"orange"},
        {"x": 5, "y": 24, "z": 34, "c":"blue"}, {"x": 5, "y": 49, "z": 79, "c":"orange"},
        {"x": 6, "y": 87, "z": 87, "c":"blue"}, {"x": 6, "y": 66, "z": 66, "c":"orange"},
        {"x": 7, "y": 17, "z": 17, "c":"blue"}, {"x": 7, "y": 27, "z": 27, "c":"orange"},
        {"x": 8, "y": 68, "z": 98, "c":"blue"}, {"x": 8, "y": 16, "z": 56, "c":"orange"},
        {"x": 9, "y": 49, "z": 49, "c":"blue"}, {"x": 9, "y": 15, "z": 15, "c":"orange"},
        {"x": 0, "y": 30, "z": 10, "c":"blue"}, {"x": 0, "y": 20, "z": 20, "c":"orange"},
        {"x": 1, "y": 43, "z": 53, "c":"blue"}, {"x": 1, "y": 91, "z": 91, "c":"orange"},
        {"x": 2, "y": 81, "z": 81, "c":"blue"}, {"x": 2, "y": 53, "z": 53, "c":"orange"},
        {"x": 3, "y": 19, "z": 19, "c":"blue"}, {"x": 3, "y": 87, "z": 47, "c":"orange"},
        {"x": 4, "y": 52, "z": 12, "c":"blue"}, {"x": 4, "y": 48, "z": 48, "c":"orange"},
        {"x": 5, "y": 24, "z": 24, "c":"blue"}, {"x": 5, "y": 49, "z": 39, "c":"orange"},
        {"x": 6, "y": 87, "z": 17, "c":"blue"}, {"x": 6, "y": 66, "z": 66, "c":"orange"},
        {"x": 7, "y": 17, "z": 17, "c":"blue"}, {"x": 7, "y": 27, "z": 17, "c":"orange"},
        {"x": 8, "y": 68, "z": 68, "c":"blue"}, {"x": 8, "y": 16, "z": 26, "c":"orange"},
        {"x": 9, "y": 49, "z": 49, "c":"blue"}, {"x": 9, "y": 15, "z": 15, "c":"orange"},
        {"x": 10, "y": 49, "z": 49, "c":"blue"}, {"x": 10, "y": 15, "z": 15, "c":"orange"},
        {"x": 0, "y": 50, "z": 50, "c":"red"}, {"x": 0, "y": 55, "z": 44, "c":"green"},
        {"x": 1, "y": 43, "z": 23, "c":"red"}, {"x": 1, "y": 20, "z": 20, "c":"green"},
        {"x": 2, "y": 81, "z": 81, "c":"red"}, {"x": 2, "y": 53, "z": 29, "c":"green"},
        {"x": 3, "y": 19, "z": 19, "c":"red"}, {"x": 3, "y": 87, "z": 87, "c":"green"},
        {"x": 4, "y": 52, "z": 52, "c":"red"}, {"x": 4, "y": 48, "z": 43, "c":"green"},
        {"x": 5, "y": 24, "z": 34, "c":"red"}, {"x": 5, "y": 49, "z": 79, "c":"green"},
        {"x": 6, "y": 87, "z": 87, "c":"red"}, {"x": 6, "y": 66, "z": 66, "c":"green"},
        {"x": 7, "y": 17, "z": 17, "c":"red"}, {"x": 7, "y": 27, "z": 27, "c":"green"},
        {"x": 8, "y": 68, "z": 98, "c":"red"}, {"x": 8, "y": 16, "z": 56, "c":"green"},
        {"x": 9, "y": 49, "z": 49, "c":"red"}, {"x": 9, "y": 15, "z": 15, "c":"green"},
        {"x": 0, "y": 30, "z": 10, "c":"red"}, {"x": 0, "y": 20, "z": 20, "c":"green"},
        {"x": 1, "y": 43, "z": 53, "c":"red"}, {"x": 1, "y": 91, "z": 91, "c":"green"},
        {"x": 2, "y": 81, "z": 81, "c":"red"}, {"x": 2, "y": 53, "z": 53, "c":"green"},
        {"x": 3, "y": 19, "z": 19, "c":"red"}, {"x": 3, "y": 87, "z": 47, "c":"green"},
        {"x": 4, "y": 52, "z": 12, "c":"red"}, {"x": 4, "y": 48, "z": 48, "c":"green"},
        {"x": 5, "y": 24, "z": 24, "c":"red"}, {"x": 5, "y": 49, "z": 39, "c":"green"},
        {"x": 6, "y": 87, "z": 17, "c":"red"}, {"x": 6, "y": 66, "z": 66, "c":"green"},
        {"x": 7, "y": 17, "z": 17, "c":"red"}, {"x": 7, "y": 27, "z": 17, "c":"green"},
        {"x": 8, "y": 68, "z": 68, "c":"red"}, {"x": 8, "y": 16, "z": 26, "c":"green"},
        {"x": 9, "y": 49, "z": 49, "c":"red"}, {"x": 9, "y": 15, "z": 15, "c":"green"},
        {"x": 10, "y": 49, "z": 49, "c":"red"}, {"x": 10, "y": 15, "z": 15, "c":"green"}
      ];
1
2
3
4
5
6
7
8
9
var normal = d3.daisy.layout.combo()
  .container('#content')
  .data(dataset)
  .dimensions(['x'])
  .measures([{field:'y', op:'mean'}, {field:'z', op:'sum'}])
  .axis('x').axis('y')
  .grid(true)
  .size(4).point(true)
  .customDomain([[], [100, 500]]);
daisy combo

Comments: