Google Charts API - wzorce kolumn i typ danych "TimeOfDay"

Question

Pracuję z Google Charts API, aby utworzyć wykres testu wydajności ucznia. Na osi X wykres pokazuje dni tygodnia. Na osi Y wykres pokazuje czas poświęcony na egzamin. (Celem jest sprawdzenie, czy uczeń przyspiesza). Mam jednak problem:

Moje dane są w formacie timeofday, a wartości są podawane na wykresie jako czasy w formacie Google Chart [HH, MM, SS, MSEC]. Kiedy wykres się wyświetla, oś Y jest drukowana jako "HH: MM: SS". Naprawdę chciałbym to zmienić, ponieważ sekundy są całkiem bezużyteczne i wyglądają na bardziej bałaganiarskie, niż bym chciał.

Interfejs API wykresów mówi, że można określić "wzór" dla kolumny, a ja określiłem "HH: MM". Nie wydaje się to jednak w ogóle działać. Ktoś ma doświadczenie w formatowaniu czasu w Tabelach Google i wie, jak to zrobić?

Answer 1

Format jest ukryty głęboko w dokumentacji interfejsu API. (http://code.google.com/apis/chart/interactive/docs/reference.html). Chodzi tu o czwartą, w dół, to mówi:

Jeżeli typ kolumna „timeofday”, ta wartość jest szereg czterech numerami: [godzina, minuty, sekundy, milisekundy].

Answer 2

Na wykresie opcje obiektu można ustawić vAxis obiektu z pola formacie i zapewnić ciąg z wzorca, którego chcesz użyć oto przykład:

new google.visualization.BarChart(document.getElementById('visualization')); 
    draw(data, 
     {title:"Yearly Coffee Consumption by Country", 
     width:600, height:400, 
     vAxis: {title: "Year", format: "yy"}, 
     hAxis: {title: "Cups"}} 
); 

Spójrz na Obiekt vAxis.

Aby uzyskać format ciągu, należy spojrzeć na stronę http://userguide.icu-project.org/formatparse/datetime, aby stworzyć preferowany wzór.

Answer 3

Więcej niż słowa mogą powiedzieć: the followingURL jest pełna wersja robocza dla Stockprices ciągu dni, a można znaleźć na stronie „http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html” Od kompletna lista nie może być wysłana poprawnie i tylko daje ważnych części:

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawChart); 

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawChart() { 
    // Create the data table. 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('datetime', 'Time'); 
    dataTable.addColumn('number', 'Price (Euro)'); 
    dataTable.addRows([ 
     [new Date(2014, 6, 2, 9, 0, 0, 0), 21.40], 
     [new Date(2014, 6, 2, 11, 0, 0, 0), 21.39], 
     [new Date(2014, 6, 2, 13, 0, 0, 0), 21.20], 
     [new Date(2014, 6, 2, 15, 0, 0, 0), 21.22], 
     [new Date(2014, 6, 2, 17, 0, 0, 0), 20.99], 
     [new Date(2014, 6, 2, 17, 30, 0, 0), 21.03], 
     [new Date(2014, 6, 3, 9, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 11, 0, 0, 0), 21.07], 
     [new Date(2014, 6, 3, 13, 0, 0, 0), 21.10], 
     [new Date(2014, 6, 3, 15, 0, 0, 0), 21.08], 
     [new Date(2014, 6, 3, 17, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 17, 30, 0, 0), 21.00], 
     [new Date(2014, 6, 4, 9, 0, 0, 0), 21.15], 
     [new Date(2014, 6, 4, 11, 0, 0, 0), 21.17], 
     [new Date(2014, 6, 4, 13, 0, 0, 0), 21.25], 
     [new Date(2014, 6, 4, 15, 0, 0, 0), 21.32], 
     [new Date(2014, 6, 4, 17, 0, 0, 0), 21.35], 
     [new Date(2014, 6, 4, 17, 30, 0, 0), 21.37], 
    ]); 

    // Instantiate and draw our chart, passing in some options. 
    // var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

    var options = { 
     title : 'AEX Stock: Nationale Nederlanden (NN)', 
     width : 1400, 
     height : 540, 
     legend : 'true', 
     pointSize: 5, 
     vAxis: { title: 'Price (Euro)', maxValue: 21.50, minValue: 20.50 }, 
     hAxis: { title: 'Time of day (Hours:Minutes)', format: 'HH:mm', gridlines: {count:9} } 
    }; 

    var formatNumber = new google.visualization.NumberFormat(
     {prefix: '', negativeColor: 'red', negativeParens: true}); 

    var formatDate = new google.visualization.DateFormat(
     { prefix: 'Time: ', pattern: "dd MMM HH:mm", }); 

    formatDate.format(dataTable, 0); 
    formatNumber.format(dataTable, 1); 

    chart.draw(dataTable, options); 
    } // drawChart 

</script> 
</head> 
<body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
</body> 

przykładem będzie:

• Bądź sformatowaną hAxis w formacie HH: mM tj 18:00 do 6:00 PM.
• Formatuje dane na wykresie (najeżdżanie kursorem na wykresy danych) z datą i godziną oraz ceną akcji.
• Daje linie siatki wykresu.

Mam nadzieję, że ten przykład wyraźnie wyjaśni, w jaki sposób prawidłowo przetwarzać dane.

Answer 4

Można użyć opcji hAxis.format lub vAxis.format. To pozwala określić ciąg formatu, gdzie można używać liter zastępcze dla różnych częściach timeofday

Aby pozbyć się sekundy, można ustawić format osi Y tak:

var options = { 
    vAxis: { format: 'hh:mm' } 
    };