Google Charts Haxis Bug wenn single entry gegeben

Question

Ich bin mit dem Bug (oder Feature) in den Google-Charts konfrontiert, wo das Diagramm Datum Etiketten in hAxis auf eine seltsame Weise zeigt, wenn es nur ein oder zwei Einträge gibt. Ich fand eine Demo im Internet, wo der gleiche Fehler vorhanden ist:

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

zu reproduzieren verengen den Diagrammbereich Regler nach unten, es sei denn nur ein Eintrag vorhanden auf dem Chart ist. Anstatt das Datum anzuzeigen, werden nur die Jahre mit dem Schritt von 10 Jahren angezeigt. Gibt es eine Möglichkeit, das zu ändern oder eine Problemumgehung durchzuführen, damit die Daten korrekt angezeigt werden?

Answer 1

standardmäßig wird die Diagramm Achsenbeschriftungen erstellen basierend auf den Daten und Größe des Diagramms
, wenn es nur eine Reihe von Daten ist, ist es nicht sicher ist, was der Achsenbereich sein soll,
und fügt Jahr Etiketten, zu füllen Raum am unteren Rand des Diagramms

dieses Verhalten zu verhindern, min und max Werte für die

in diesem Szenario hAxis.viewWindow Option sollte das Sichtfenster, ändern Sie die Bereichsfilter jedes Mal ändert

als solche, trennen das Liniendiagramm von der Armaturenbrett
wenn die 'ready' Ereignis ausgelöst Tisch Diagramm,
die gefilterten Datentabelle aus dem Kartentisch verwenden, das Liniendiagramm

Sie Datentabelle Methode getColumnRange kann zu ziehen um zu bestimmen, die viewWindow

siehe folgende Arbeits Schnipsel ...

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>