API Google Charts - шаблоны столбцов и тип данных TimeOfDay

Question

Я работаю с API графиков Google, чтобы создать график тестовой производительности студента. На оси X график показывает дни недели. На оси Y график показывает, как долго студент проводил экзамен. (Цель учителей - узнать, ускоряет ли учащийся). Однако у меня есть проблема:

Мои данные находятся в формате timeofday, и я предоставляю значения диаграмме в качестве продолжительности времени с использованием формата Google Charts [HH, MM, SS, MSEC]. Когда диаграмма отображается, ось Y печатается как «HH: MM: SS». Я бы очень хотел настроить это, потому что секунды довольно бесполезны, и это выглядит более грязным, чем хотелось бы.

API диаграмм говорит, что вы можете указать «шаблон» для столбца, и я указал «HH: MM». Однако это, похоже, совсем не вступает в силу. У кого-нибудь есть опыт форматирования времени суток в Google Charts и знаете, как это сделать?

Answer 1

Формат глубоко погружен в документацию по API. (Http://code.google.com/apis/chart/interactive/docs/reference.html). Речь идет о четверти пути вниз, он говорит:

Если тип столбца «TimeOfDay», значение представляет собой массив из четырех чисел: [час, минута, секунда, миллисекунды].

Answer 2

В таблице параметры объекта можно установить vAxis объект с полем формата и обеспечить строку с шаблоном вы хотите использовать вот пример:

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"}} 
); 

Посмотрите на объект vAxis.

Для формата строки вы должны посмотреть на http://userguide.icu-project.org/formatparse/datetime, чтобы создать вам образец, который вы предпочитаете.

Answer 3

Более слова можно сказать: followingURL это полная рабочая версия для Stockprices в дни, и могут быть найдены в «http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html» Поскольку полный список не может быть размещена правильно, я только дать важные части:

// 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> 

пример будет:

• Сделать отформатированный hAxis с форматом HH: MM т.е. 18:00 по 6:00.
• Форматирует данные на графике (наведите указатель мыши на данные) с днем ​​и днем ​​и стоимостью акций.
• Дает график линий сетки.

Надеюсь, что в этом примере выясняется, как правильно обрабатывать данные.

Answer 4

Вы можете использовать опцию hAxis.format или vAxis.format. Это позволяет задать строку формата, где вы используете шаблонные письма для различных частей вашего TimeOfDay

Чтобы избавиться от секунд, вы можете установить формат ось Y, как это:

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