2

구글 칼럼 차트를 수평으로 패닝하기위한 JavaScript 또는 예제가 있습니까? 몇 달 분의 데이터가 있으며 사용자가 왼쪽에서 오른쪽으로 볼 수 있기를 바랍니다. 이것은 내가 원하는 기능입니다 : http://almende.github.io/chap-links-library/js/graph/examples/example05_gaps_in_data.html. 내 사용자가 Annotated TimeLine을 사용하여 다시 푸시했습니다.구글 칼럼 차트를 수직으로 패닝

답변

0

아이러니하게도 내가 언급 한 라이브러리는 실제로 Google 시각화 차트를 사용하고 패닝을 포함한 놀라운 것들을 수행합니다.

+1

그들은 사물의 데이터 끝을 처리하기 위해 시각화 API를 사용하고 있지만, 차트 다른 차트 라이브러리에서 나타납니다. – asgallant

+0

예. 이제 알겠습니다. 원점으로 돌아가다. –

5

ColumnChart를 ChartRangeFilter까지 연결하고 AnnotatedTimeline의 확대/축소 및 확대/축소 기능을 사용할 수 있습니다.

[편집]

시각화 API의 새로운 버전은 확대하고 exploreroption를 통해 차트를 패닝 지원합니다. 기본값을 사용하면 사용자가 클릭하고 드래그하여 스크롤 휠 및 팬으로 확대/축소 할 수 있습니다. 다음은 예입니다 :

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'X'); 
    data.addColumn('number', 'Y'); 
    var y = 50; 
    for (var i = 0; i < 1000; i++) { 
     y += Math.ceil(Math.random() * 3) * Math.pow(-1, Math.floor(Math.random() * 2)); 
     data.addRow([i, y]); 
    } 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     height: 400, 
     width: 600, 
     explorer: { 
      axis: 'horizontal', 
      keepInBounds: true 
     } 
    }); 
} 
google.load('visualization', 

jsfiddle : http://jsfiddle.net/asgallant/KArng/

+0

몇 가지 샘플 코드에 대한 자세한 정보 나 링크를 제공해 주시겠습니까? 이상적으로는 마우스를 사용하여 팬을 사용하고 싶습니다. 내 상사는 조정 가능한 상자 컨트롤을 좋아하지 않습니다. –

+0

차트를 클릭하고 끌어 냄으로써 이론적으로는 가능하지만 잘 구현하기 어려울 수 있습니다. 나는 이것을 조금 생각해야 할 것입니다. – asgallant

+0

좋은 소식 : 이제 API가 추가 컨트롤없이 확대/축소 및 패닝을 지원합니다. 내 게시물을 예제로 업데이트했습니다. – asgallant