구글 차트 수평 스크롤

Question

가 여기에 지금까지 내 차트 : JSFiddle

<!-- begin snippet: js hide: false console: true --> 

<!-- language: lang-js --> 
     google.charts.load('current', {'packages':['corechart']}); 
     google.charts.setOnLoadCallback(drawVisualization); 


    function drawVisualization() { 
    // Some raw data (not necessarily accurate) 

    var data = google.visualization.arrayToDataTable([ 
    ['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''], 
    [0.85, 165, 938, 522, 998, null, null, null, null, 614.6, 500], 
    [1.15, null, null, null, null, 165, 938, 522, 998, 614.6, 510], 
    [1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],  
    [1.85, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
    [2.15, null, null, null, null, 165, 938, 522, 998, 682, 540], 
    [14, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
    [16, null, null, null, null, 165, 938, 522, 998, 682, 540] 
    ]); 

var options = { 
    title : 'Chart', 
    vAxes: [ 
    {title: 'foo'}, 
    {title: 'bar'} 
    ], 
    //hAxis: { ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, 
    hAxis: { 
    ticks: [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], 
    textStyle : { 
     fontSize: 9 // or the number you want 
    } 
    }, 
    seriesType: 'bars', 
    bar: { groupWidth: 1000 }, 
    isStacked: true, 
    legend: 'none', 
    interpolateNulls: true, 
    series: { 
     0: { 
      targetAxisIndex: 0 
     }, 
     4: { 
      targetAxisIndex: 0 
     }, 
     8: { 
      targetAxisIndex: 1, 
      type: 'line' 
     }, 
     9: { 
      targetAxisIndex: 1, 
      type: 'line' 
     } 
    } 
}; 

var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
    } 
</script> 

<!-- language: lang-html --> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <div id="chart_div" style="width: 900px; height: 500px;"></div> 

내가 차트 요소를 만들 수있는 방법이 있는지 vAxes 라벨이 고정으로 더 큰 만들지 만, 수평 스크롤을 물어보고 싶은게 및 항상 볼 수 있습니까? 이 같은

뭔가 :

Answer 1

구글 차트는 스크롤하여 차트의 확대/축소 할 수 있습니다함으로써이 탐색기 기능이 있습니다. 그러나 단추 또는 스크롤 막대가 표시되지 않습니다. 마우스를 사용하여 표시된 차트에서 마우스로 끌어서 수평 이동해야합니다.

이 기능을 사용하려면 옵션 개체에 explorer: {axis: 'horizontal'}을 추가하기 만하면됩니다. 표시되는 데이터가없는 곳을 방문하면 더 이상 표시되지 않을 수 있습니다.이 경우 keepInBounds: true을 탐색기 옵션에 추가하면 explorer: {axis: 'horizontal', keepInBounds: true}이됩니다.

explorer 옵션에 대한 자세한 내용은 테이블 행 이름이 explorer 인 here입니다.

스크롤 막대 기능을 사용하려면 탐색 할 수있는 다른 기능은 Google 차트 ChartRangeFilter here입니다. 구현 세부 사항 및 단계는 here이며 차트 유형에 따라 변경해야합니다.