건물 HTML 테이블 “구글 시각화 API”

방법에 대 한 좋은 시각 표로 데이터를 표시 하 고 정렬 가져오나 하 수, 동적으로 및 어떤을 작성 하지 않고도 모든 것 “HTML 표”?

프레 젠 테이 션

구글 시각화 API 신속 하 고 쉽게 당신의 데이터의 시각화를 위한 기술의 세트를 선물 한다. 이 게시물에서 우리는 볼 것 이다는 테이블 차트.

작업

예를 들어
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
<?PHP
<HTML 랭="pt-BR">
  <머리>    
    <메타 문자 집합="ISO-8859-1" />
    <스크립트 유형=' 텍스트/자바 스크립트 ' src=' https://www.google.com/jsapi '></스크립트>
    <스크립트 유형=' 텍스트/자바 스크립트 '>
      구글.부하(' 시각화 ', ' 1 ', {패키지:[' 테이블 ']});
      구글.setOnLoadCallback(drawTable);
      함수 drawTable() {
        var 날짜 = 새로운 내용 구글.시각화.DataTable();
        날짜.addColumn(' 문자열 ', ' 이름 ');
        날짜.addColumn(' 번호 ', ' 연봉 ');
        날짜.addColumn(' 부울 ', ' 풀 타임 ');
        날짜.AddRows([
          [' 존 ',  {v: 2000, (f): ' R ' $ 2, 000.00}, true],
          [' 마리아 ', {v: 5000, (f): ' R ' $ 5, 000.00}, false],
          [' 앨리스 ', {v: 1000, (f): ' R ' $ 1, 000.00}, true],
          [' 밥 ',   {v: 1500, (f): ' R ' $ 1, 500.00}, true]
        ]);
        var 테이블 = 새로운 내용 구글.시각화.테이블(문서.getElementById(' table_div '));
        테이블.그리기(날짜, {showRowNumber: true});
      }
    </스크립트>
  </머리>
  <바디>
    <div id=' table_div '></div>
  </바디>
</HTML>
?>

(1) 위의 코드에서, 우리가 Google에서 JavaScript API를 호출 하 여 시작 하는 참고 (JSAPI).

(2) 다음, 우리 수행 시각화, 버전 1.0, 그리고 라이브러리 ' 테이블’.

(3) JSAPI 기능 사용 setOnLoadCallback 처리기를 할당 drawTable (또는 다른 이름을), 누가 실제로 해야 만들고 테이블 설정.

(4) 는 DataTable 있는 각 열 동일한 데이터 형식을 지원 해야 하는 HTML 테이블로 변환 (문자열, 부울, 번호, 등).

(5) 사용은 addColumn() 열을 만들려면, 매개 변수 형식과 이름으로 전달.

(6) 사용 AddRows() 테이블의 행을 만들려면, IE, 자체 데이터 삽입. 라인은 대괄호 구분 [] 그리고 각 셀의 정보는 쉼표로 구분 하 여. 거기는 표기법을 실현 “v” 그리고 “(f)”, 나 즉 값 및 필드, 각각, IE, 셀의 레이블 필드에 표시 될 실제 값. 이것은 필요, 때문에, 이 열은 “정수”, 그래서 올바른 순서 수 훼손 될 문자열으로 찍은.

(7) 마지막으로, 우리는 DIV 테이블 디자인 렌더링 알려 (table_div) 그리고 준비!

실제로

위의 코드는 다음 HTML 테이블을 생성:

그것은 심지어 재미 있는? 모든 HTML 테이블 만들어진 없이 우리가 단일 테이블을 작성 하는 데 필요한, TR 또는 TD. 물론, 이것은 단지 데모. 당신의 지식을 심화 하 고 통해 테이블을 사용 하는 다른 가능성을 발견할 수는 테이블 차트.

갤러리

거기는 또한 다른 많은 멋진 기능을 합니다 구글 차트 갤러리 제공. 다양 한 데이터 시각화의 요구에 맞게 최적화 된 그래픽. 그래픽은 HTML5/SVG 순수 기술을 기반으로 (IE의 이전 버전에 대 한 VML을 채택), 그래서 플러그인에 대 한 필요가 있다. 이 차트는 단지 몇 가지 간단한 단계에서 귀하의 페이지에 추가할 수 있습니다..

글꼴

총 조회 수: 5928

응답을 남기다

귀하의 이메일 주소가 게시 되지 것입니다. 필수 항목으로 표시 됩니다. *