단일 항목이 주어진 경우 Google 차트 haxis 버그

Question

하나 또는 두 개의 항목 만있는 경우 차트에 hAxis의 날짜 라벨이 표시되는 Google 차트의 버그 (또는 기능)에 직면하고 있습니다.

https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/#create-dashboard

는, 재생 한 항목 만 차트에 존재하지 않는 차트 범위 슬라이더를 좁힐 : 나는 같은 버그가 존재하는 웹 데모를 발견했다. 날짜를 표시하는 대신 10 년 단계 만 표시합니다. 날짜를 올바르게 표시 할 수 있도록 수정하거나 해결 방법이 있습니까?

Answer 1

는 기본적으로 차트는 데이터의 한 행이있을 때,이 축 범위를해야 확실하지의,
을 차트
의 데이터와 크기에 따라 축 레이블을 만들고 올해의 레이블을 추가합니다 이 문제를 방지하기 위해 차트

의 하단에 공간을 채우기 위해,이 시나리오에서 hAxis.viewWindow 옵션

에 대한 min 및 max 값을 설정,보기 창은 범위 필터가

를 변경 때마다 변경해야합니다 같은 0

, 테이블 차트의 'ready' 이벤트가 발생이
이

당신은 데이터 테이블 방법 getColumnRange를 사용할 수있는 라인 차트를 그릴 테이블 차트에서 필터링 된 데이터 테이블을 사용하는 경우 대시 보드
에서 라인 차트를 분리 ... viewWindow

가 작업 조각 다음을 참조 결정

google.charts.load('current', { 
 
    packages: ['controls'] 
 
}).then(function() { 
 
    var myData = new google.visualization.DataTable(); 
 
    myData.addColumn('date', 'Date'); 
 
    myData.addColumn('number', 'Hours Worked'); 
 
    myData.addRows([ 
 
    [new Date(2014, 6, 12), 9], 
 
    [new Date(2014, 6, 13), 8], 
 
    [new Date(2014, 6, 14), 10], 
 
    [new Date(2014, 6, 15), 8], 
 
    [new Date(2014, 6, 16), 0] 
 
    ]); 
 

 
    var dash_container = document.getElementById('dashboard_div'), 
 
    myDashboard = new google.visualization.Dashboard(dash_container); 
 

 
    var myDateSlider = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control_div', 
 
    options: { 
 
     filterColumnLabel: 'Date' 
 
    } 
 
    }); 
 

 
    var myTable = new google.visualization.ChartWrapper({ 
 
    chartType : 'Table', 
 
    containerId : 'table_div' 
 
    }); 
 
    google.visualization.events.addListener(myTable, 'ready', drawLine); 
 

 
    var myLine = new google.visualization.ChartWrapper({ 
 
    chartType : 'LineChart', 
 
    containerId : 'line_div' 
 
    }); 
 

 
    myDashboard.bind(myDateSlider, myTable); 
 
    myDashboard.draw(myData); 
 

 
    function drawLine() { 
 
    var dataTable = myTable.getDataTable(); 
 
    var dateRange = dataTable.getColumnRange(0); 
 
    var xTicks = dataTable.getDistinctValues(0); 
 
    myLine.setDataTable(dataTable); 
 
    myLine.setOption('hAxis.ticks', xTicks); 
 
    myLine.setOption('hAxis.viewWindow.min', dateRange.min); 
 
    myLine.setOption('hAxis.viewWindow.max', dateRange.max); 
 
    myLine.draw(); 
 
    } 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard_div"> 
 
    <div id="control_div"></div> 
 
    <div id="line_div"></div> 
 
    <div id="table_div"></div> 
 
</div>