Google Charts API CalendarChart

Niels Vanwingh

데이터 시각화를 위해 Google Charts API를 사용하고 있습니다. 차트에서 선택한 날짜의 날짜를 검색하고 싶습니다.

내가 검색하는 것은 매우 이상합니다. 문서에서 권장하는대로 차트에서 selectHandler를 사용하고 있습니다.

  function selectHandler() {

    console.log(chart.getSelection()[0]);

  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

다음 날짜를 클릭하면 콘솔에서 다음 출력을 읽습니다.

22/04/2020 : 1587513600000

19/06/2020 : 1592524800000

이것은 어떤 종류의 날짜 형식입니까? 누구든지 나를 도울 수 있습니까?

하얀 모자

이것은 Unix Epoch 이후 밀리 초 수로 표시된 날짜입니다. 날짜 객체
getTime() 메서드가 반환 한 값과 동일 합니다.

선택에서받은 값을 날짜 생성자에 전달하여 날짜를 가져올 수 있습니다.

var selection = chart.getSelection();
if (selection.length > 0) {
  var selectedDate = new Date(selection[0].date);
}

다음 작업 스 니펫 참조 ...

google.charts.load('current', {
  packages: ['calendar']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'date', id: 'Date' });
  dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
  dataTable.addRows([
    [ new Date(2012, 3, 13), 37032 ],
    [ new Date(2012, 3, 14), 38024 ],
    [ new Date(2012, 3, 15), 38024 ],
    [ new Date(2012, 3, 16), 38108 ],
    [ new Date(2012, 3, 17), 38229 ],
    [ new Date(2013, 9, 4), 38177 ],
    [ new Date(2013, 9, 5), 38705 ],
    [ new Date(2013, 9, 12), 38210 ],
    [ new Date(2013, 9, 13), 38029 ],
    [ new Date(2013, 9, 19), 38823 ],
    [ new Date(2013, 9, 23), 38345 ],
    [ new Date(2013, 9, 24), 38436 ],
    [ new Date(2013, 9, 30), 38447 ]
  ]);

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
   title: "Red Sox Attendance",
   height: 350,
  };

  function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var selectedDate = new Date(selection[0].date);
      console.log(selectedDate);
    }
  }

  google.visualization.events.addListener(chart, 'select', selectHandler);

  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

참고 : 콘텐츠에 액세스하기 전에 선택 항목의 길이를 확인해야합니다.
선택 이벤트는 날짜가 선택되지 않은 경우에도 호출됩니다.
이 경우 선택 배열은 비어 있습니다 ...

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Google Charts API에서 pieStartValue 가져 오기

분류에서Dev

It's possible to use Google Charts api in Android application offline?

분류에서Dev

How to change section color of a stacked bar chart in Google Charts API?

분류에서Dev

Google Charts - BoxPlot

분류에서Dev

Google Charts mysql PHP

분류에서Dev

JSP JSON with Google Charts - Line Charts

분류에서Dev

Google Charts API-그릴 특정 열 선택

분류에서Dev

How to remove Pie Charts from Google Maps API V3 on this example?

분류에서Dev

IE에서 작동하지 않는 Google Charts API

분류에서Dev

Google charts are not showing in Snappy PDF

분류에서Dev

Google Charts json data not loading

분류에서Dev

Promisify google.charts.setOnLoadCallback

분류에서Dev

Google Charts API : 범례 클릭시 시리즈 표시 / 숨기기. 어떻게?

분류에서Dev

Google Charts API : 정의되지 않은 'toArrays'속성을 읽을 수 없습니다.

분류에서Dev

generating graph with static data using Google Charts

분류에서Dev

display annotation for zero value in google charts

분류에서Dev

겹치는 툴팁-Google Charts

분류에서Dev

Google Charts API : 히스토그램, 막대를 융합하고 x 눈금을 정수로 변경하는 방법

분류에서Dev

Google Charts API : 히스토그램, 막대를 융합하고 x 눈금을 정수로 변경하는 방법

분류에서Dev

Google Charts API에 입력하기 위해 배열을 JSON으로 형식화합니까?

분류에서Dev

Google Charts API "발견되지 않은 오류 : 하나 이상의 글꼴을로드 할 수 없습니다."

분류에서Dev

Google Charts API-두 개의 차트가있는 페이지에 렌더링 된 차트 하나만

분류에서Dev

Analytics API의 데이터를 사용하여 동일한 번호의 행을 Google Charts API에 전달하려면 어떻게합니까

분류에서Dev

Remove blank space above and below Google Charts horizontal column chart

분류에서Dev

rails chartkick google charts load time very long

분류에서Dev

Multiple Google Charts on one page - Loading Library efficiently?

분류에서Dev

Google Charts Linecharts 기능에 마커 추가

분류에서Dev

JSON 배열을 Google Charts DataTable로 파싱

분류에서Dev

Google Charts API에서 누적 막대 차트의 섹션 색상을 변경하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    Google Charts API에서 pieStartValue 가져 오기

  2. 2

    It's possible to use Google Charts api in Android application offline?

  3. 3

    How to change section color of a stacked bar chart in Google Charts API?

  4. 4

    Google Charts - BoxPlot

  5. 5

    Google Charts mysql PHP

  6. 6

    JSP JSON with Google Charts - Line Charts

  7. 7

    Google Charts API-그릴 특정 열 선택

  8. 8

    How to remove Pie Charts from Google Maps API V3 on this example?

  9. 9

    IE에서 작동하지 않는 Google Charts API

  10. 10

    Google charts are not showing in Snappy PDF

  11. 11

    Google Charts json data not loading

  12. 12

    Promisify google.charts.setOnLoadCallback

  13. 13

    Google Charts API : 범례 클릭시 시리즈 표시 / 숨기기. 어떻게?

  14. 14

    Google Charts API : 정의되지 않은 'toArrays'속성을 읽을 수 없습니다.

  15. 15

    generating graph with static data using Google Charts

  16. 16

    display annotation for zero value in google charts

  17. 17

    겹치는 툴팁-Google Charts

  18. 18

    Google Charts API : 히스토그램, 막대를 융합하고 x 눈금을 정수로 변경하는 방법

  19. 19

    Google Charts API : 히스토그램, 막대를 융합하고 x 눈금을 정수로 변경하는 방법

  20. 20

    Google Charts API에 입력하기 위해 배열을 JSON으로 형식화합니까?

  21. 21

    Google Charts API "발견되지 않은 오류 : 하나 이상의 글꼴을로드 할 수 없습니다."

  22. 22

    Google Charts API-두 개의 차트가있는 페이지에 렌더링 된 차트 하나만

  23. 23

    Analytics API의 데이터를 사용하여 동일한 번호의 행을 Google Charts API에 전달하려면 어떻게합니까

  24. 24

    Remove blank space above and below Google Charts horizontal column chart

  25. 25

    rails chartkick google charts load time very long

  26. 26

    Multiple Google Charts on one page - Loading Library efficiently?

  27. 27

    Google Charts Linecharts 기능에 마커 추가

  28. 28

    JSON 배열을 Google Charts DataTable로 파싱

  29. 29

    Google Charts API에서 누적 막대 차트의 섹션 색상을 변경하는 방법은 무엇입니까?

뜨겁다태그

보관