Jak ustawić hAxis.viewWindow.max dla LineChart, gdy główną osią jest typeofday?

Question

Potrzebuję narysować wykres, aby pokazać ewolucję danych w czasie rzeczywistym w jeden dzień. Gram w Google Charts Playground, aby zobaczyć, jak będzie on wizualizowany, ale nie byłem w stanie ustawić opcji hAxis.viewWindow.max, aby oś X została naprawiona.

Oto kod używam do badania:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 

    data.addColumn('timeofday', 'x'); 
    data.addColumn('number', 'S0'); 
    data.addColumn('number', 'S1'); 
    data.addColumn('number', 'S2'); 

    data.addRows([ 
    [[0,0,0,0], 1,  1,   0.5], 
    [[1,0,0,0], 2,  0.5,   1], 
    [[2,0,0,0], 4,  1,   0.5], 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}, 
        hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}} 
     ); 
    } 

Dokumentacja wnosi hAxis.viewWindow.max odbiera numery, ale nie znaleźli sposób, aby reprezentować „timeofday” typ jako liczba. Używając tego, oś X trwa od 0 rano do 2 nad ranem, ale potrzebowałem osi, aby przejść do północy.

Próbowałem używać "datetime" jako typ kolumny, z tym samym problemem.

Próbka poniżej, używając numerów, działa tak zamierzałem go, rysowanie linii, gdzie są moje punkty, ale rozszerzenie siatki aż do mojego wartość maksymalna:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 

    data.addColumn('number', 'x'); 
    data.addColumn('number', 'S0'); 
    data.addColumn('number', 'S1'); 
    data.addColumn('number', 'S2'); 

    data.addRows([ 
    [0, 1,  1,   0.5], 
    [1, 2,  0.5,   1], 
    [2, 4,  1,   0.5], 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}, 
        hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}} 
     ); 
} 

Answer 1

osi X osiągnie maksymalną wartość (lub zamknie się w tych samych przypadkach - jak ten). Na przykład

w przypadku:

data.addRows([ 
    [[0,0,0,0], 1,  1,   0.5], 
    [[1,0,0,0], 2,  0.5,   1], 
    ]); 

oś X kończy w 1:00

w przypadku:

data.addRows([ 
    [[0,0,0,0], 1,  1,   0.5], 
    [[1,0,0,0], 2,  0.5,   1], 
    [[23,59,59,0], 4,  1,   0.5], 
    ]); 

będzie kończyć się 23: 59:59 pokazując 22:00 jako ostatnią etykietę osi X.

Oznacza to, że niezależnie od wartości zdefiniowanej jako max w hAxis, wykres przechodzi do maksymalnej wartości "timeofday", którą masz w swoim zestawieniu danych (faktycznie ostatnim dodanym wierszu).