Googleのチャートhaxisのバグが1つの項目で指定された場合

Question

Googleのグラフのバグ（または機能）に直面しています.1つまたは2つの項目しかないときにグラフにhAxisの日付ラベルが表示されています。エントリが1つしかグラフに存在しない限り、チャートの範囲スライダを絞り込む、再現するために

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

：私は、同じバグが存在するウェブ上でデモを発見しました。日付を表示する代わりに、10年のステップで年を表示するだけです。それを修正したり、回避策を講じたりして、日付が正しく表示されるようにする方法はありますか？デフォルトで

Answer 1

、チャートは、チャートのデータとサイズに基づいて、軸ラベルを作成します
データの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>

...次の作業スニペットを参照してください