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

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

11 голосов
/ 14 декабря 2011

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

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

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

Ответы [ 4 ]

9 голосов
/ 08 февраля 2012

Формат находится глубоко в документации API. (http://code.google.com/apis/chart/interactive/docs/reference.html). Это примерно четверть пути вниз, это говорит:

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

2 голосов
/ 03 июля 2014

Больше, чем могут сказать слова: следующийURL - это полная рабочая версия для 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>

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

  • Создайте отформатированную ось с форматом ЧЧ: мм, т. Е. 18:00 для 18:00.
  • Форматирует данные на графике (наведите курсор на графики данных) с указанием дня и времени и цены акций.
  • Дает линии сетки графика.

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

0 голосов
/ 16 октября 2017

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

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

  var options = {
    vAxis: { format: 'hh:mm' }
  };
0 голосов
/ 24 мая 2013

В диаграмме объекта параметров вы можете установить объект vAxis с полем format и предоставить строку с шаблоном, который вы хотите использовать, вот пример: 

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 , чтобы построить вам шаблон, который вы предпочитаете.

...