programing

구글 차트 API로 X축 날짜를 사용하는 방법은 무엇입니까?

starjava 2023. 5. 22. 20:05
반응형

구글 차트 API로 X축 날짜를 사용하는 방법은 무엇입니까?

구글 차트 API로 차트를 그려서 X축 값이 한 달에 며칠이 되도록 하는 방법이 있나요?

동일한 빈도로 제공되지 않는 데이터 포인트가 있습니다.예:

Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500

저는 한 달 동안의 시간을 기준으로 각 데이터 포인트를 상대 거리로 구분하는 차트를 만들고 싶습니다.엑셀로도 가능한데 구글 차트로 계산해서 표시하려면 어떻게 해야 하나요?

Google 차트와 유사한 무료 솔루션이나 ASP.NET과 함께 사용할 수 있는 무료 라이브러리도 환영합니다.

업데이트 고급 그래프 "도표 차트" 기능을 사용하여 차트 API에서 직접 지원됩니다. - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

ReHash Database Statistics 차트에서 이 작업을 수행했습니다(날짜가 일정한 간격으로 표시됨에도 불구하고 이 작업을 수행하고 있음을 정확히 보여주지는 않습니다).

먼저 차트의 전체 너비와 유사한 전체 기간을 얻고자 합니다.이를 위해 가장 빠른 날짜에서 가장 빠른 날짜를 뺍니다.나는 유닉스-에포치 타임스탬프가 정수이고 이런 식으로 비교하기 쉽기 때문에 사용하는 것을 선호하지만, 당신은 쉽게 초수 등을 계산할 수 있습니다.

이제 데이터를 반복합니다.각 날짜에 대해 날짜가 처음부터 시작되는 전체 기간의 백분위수를 지정합니다(즉, 가장 빠른 날짜는 0, 가장 늦은 날짜는 100).각 날짜에 대해 먼저 데이터 집합의 가장 이른 날짜부터 현재 날짜의 거리를 계산하려고 합니다.기본적으로 "우리는 시작부터 얼마나 멀리 떨어져 있는가"입니다.따라서 현재 날짜에서 가장 빠른 날짜를 뺍니다.그런 다음 백분위수를 찾기 위해 현재 날짜의 거리전체 기간으로 나눈 다음 100을 곱하고 모든 소수점을 잘라내거나 반올림하여 적분 x 좌표를 제공합니다.

그리고 그것은 매우 간단합니다!x 값의 범위는 0(차트의 왼쪽)에서 100(오른쪽)이며 각 데이터 점은 실제 시간 거리에 따라 시작점에서 거리를 두고 있습니다.

질문이 있으면 언제든지 물어보세요!원한다면 페수도코드나 PHP를 올릴 수 있습니다.

저도 같은 문제를 겪었고, 구글 차트에서 산점도를 발견했습니다. 그것은 정확히 필요한 것을 합니다.

여기 제가 만든 코드가 있습니다(그들의 코드를 출발점으로 삼았습니다).

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Quantity');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 3, 1), 40])
    data.addRow([new Date(2011, 6, 1), 50])


    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('visualization'));
    chart.draw(data, {title: 'Test',
                      width: 600, height: 400,
                      vAxis: {title: "cr", titleTextStyle: {color: "green"}},
                      hAxis: {title: "time", titleTextStyle: {color: "green"}},
                      lineWidth: 1}
              );
}

예를 들어, 1월은 0, 2월은 1, ..., 12월은 11입니다.

이제 고급 그래프를 사용하여 이 작업을 수행할 수 있습니다.

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

이 작업은 Google 차트에서 매우 쉽게 수행할 수 있지만 응용 프로그램에서 레이블을 계산해야 합니다.

chxl 관리도 x 레이블 매개변수가 필요합니다.다음 예제에서는 y축에 50단계의 숫자를 표시하고 하단에는 날짜를 표시합니다.

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009

안녕하세요. 저도 당신과 같은 생각을 하고 있습니다.레이블이 서로 덮어쓰는 문제를 예측할 수 있으며 두 가지 접근법만 생각할 수 있습니다.

형식(월/화, 월/토, 1 Jan/1 Feb, 1 Jan/1 1st, 2월 1일, 2월 29일, 14/2/2010 등)에 따라 각 날짜에 얼마나 많은 문자를 입력할 수 있는지 파악한 다음 차트 너비에 적합할 수 있는 레이블 수를 계산합니다(이는 픽셀의 문자 너비(고정 글꼴의 경우).

물론 레이블이 모든 데이터와 직접 정렬될 수도 있습니다.

여러 개의 X축 레이블을 사용하고 날짜를 세로로 배치합니다.

언급URL : https://stackoverflow.com/questions/1020061/how-to-use-dates-in-x-axis-with-google-chart-api

반응형