Эта страница переведена с помощью Cloud Translation API.

Календарь Диаграмма

Обзор
Простой пример
Дни
Недели
Месяцы
Годы
Загрузка
Формат данных
Параметры конфигурации
Методы
События
Политика данных

Обзор

Примечание. JavaScript считает месяцы, начиная с нуля : январь равен 0, февраль равен 1, а декабрь равен 11. Если ваша календарная диаграмма кажется ошибочной на месяц, вот почему.

Календарная диаграмма — это визуализация, используемая для отображения активности в течение длительного периода времени, например месяцев или лет. Их лучше всего использовать, когда вы хотите проиллюстрировать, как некоторое количество изменяется в зависимости от дня недели или как оно изменяется во времени.

Календарная диаграмма может претерпевать существенные изменения в будущих версиях Google Charts.

Диаграммы календаря отображаются в браузере с использованием SVG или VML , в зависимости от того, что подходит для браузера пользователя. Как и все диаграммы Google, диаграммы календаря отображают всплывающие подсказки, когда пользователь наводит курсор на данные. И надо отдать должное: наша календарная диаграмма была вдохновлена визуализацией календаря D3.

Простой пример

Допустим, мы хотели показать, как посещаемость спортивной команды менялась в течение сезона. С помощью календарной диаграммы мы можем использовать яркость для обозначения значений и позволять людям сразу видеть тенденции:

Вы можете навести указатель мыши на отдельные дни, чтобы увидеть базовые значения данных.

Чтобы создать календарную диаграмму, загрузите пакет calendar , а затем создайте два столбца: один для дат, а другой для значений. (Дополнительный третий столбец для индивидуального стиля появится в будущем выпуске Google Charts.)

Затем заполните строки парами дата-значение, как показано ниже.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

Дни

Каждый квадрат на календарной диаграмме представляет собой день. В настоящее время цвет ячеек данных нельзя настроить, хотя это изменится в следующем выпуске Google Charts.

Если все значения данных положительные, цвета будут варьироваться от белого до синего, причем самый глубокий синий цвет указывает на самые высокие значения. Если есть отрицательные значения данных, они будут отображаться оранжевым цветом, как показано ниже.

Код этого календаря аналогичен первому, за исключением того, что строки выглядят так:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

Вы можете изменить размер дней («ячеек») с помощью параметра calendar.cellSize :

Здесь мы изменили calendar.cellSize на 10, уменьшив количество дней и, следовательно, диаграмму в целом.

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

Дни без значений данных можно настроить с помощью параметра noDataPattern :

Здесь мы устанавливаем светло-голубой color и чуть более темный оттенок backgroundColor :

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Вы можете управлять цветом границы ячейки, шириной границы и непрозрачностью с помощью calendar.cellColor :

Вам нужно быть осторожным, чтобы выбрать цвет обводки, который будет отличаться от monthOutlineColor , или выбрать низкую непрозрачность. Вот варианты для диаграммы выше:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Если вы сосредоточитесь на дне на приведенном выше графике, граница будет выделена красным цветом. Вы можете управлять этим поведением с помощью параметров calendar.focusedCellColor :

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Недели

По умолчанию дни недели обозначаются первыми буквами от воскресенья до субботы. Вы не можете изменить порядок дней, но вы можете изменить используемые буквы с помощью параметра calendar.daysOfWeek . Кроме того, вы можете управлять отступом между днями недели и диаграммой с помощью calendar.dayOfWeekRightSpace и настраивать стиль текста с помощью calendar.dayOfWeekLabel :

Здесь мы меняем шрифт меток недели, добавляем отступ в 10 пикселей между метками и данными диаграммы и начинаем недели в понедельник.

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

Месяцы

По умолчанию месяцы обозначаются темно-серыми линиями. Вы можете использовать параметр calendar.monthOutlineColor для управления границами, параметр calendar.monthLabel для настройки шрифта метки и параметр calendar.underMonthSpace для настройки заполнения метки:

Мы установили шрифт метки на темно-красный 12pt Times-Roman жирный курсив, установили контуры того же цвета и добавили отступ в 16 пикселей. Неиспользуемые контуры месяца имеют более бледный цвет того же оттенка.

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

Годы

Годы в календарных диаграммах всегда находятся на левом краю диаграммы и могут быть настроены с помощью calendar.yearLabel и calendar.underYearSpace :

Мы устанавливаем шрифт года на темно-зеленый 32pt Times-Roman жирный курсив и добавляем десять пикселей между метками года и нижней частью диаграммы:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

Загрузка

Имя пакета google.charts.load — "calendar" :

  google.charts.load("current", {packages: ["calendar"]});

Имя класса визуализации — google.visualization.Calendar :

  var visualization = new google.visualization.Calendar(container);

Формат данных

Строки: Каждая строка в таблице представляет дату.

Столбцы:

	Столбец 0	Колонка 1	...	Столбец N (необязательно)
Цель:	Даты	Ценности	...	Дополнительные роли
Тип данных:	дата, дата и время или время дня	количество	...
Роль:	домен	данные	...
Необязательные роли столбцов :	Никто	Никто	...	подсказка

Параметры конфигурации

Имя
календарь.cellColor	Параметр `calendar.cellColor` позволяет настроить границу квадратов календарных дней: var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; Тип: объект По умолчанию: `{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }`
Calendar.cellSize	Размер квадратов календарных дней: var options = { calendar: { cellSize: 10 } }; Тип: целое По умолчанию: 16
Calendar.dayOfWeekLabel	Управляет стилем шрифта меток недели в верхней части графика: var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; Тип: объект По умолчанию: `{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }`
Calendar.dayOfWeekRightSpace	Расстояние между правым краем меток недели и левым краем дневных квадратов графика. Тип: целое По умолчанию: 4
Calendar.daysOfWeek	Однобуквенные метки для использования с воскресенья по субботу. Тип: строка По умолчанию: `'SMTWTFS'`
календарь.focusedCellColor	Когда пользователь фокусируется (скажем, наводит курсор) на квадрат дня, календарные диаграммы выделяют этот квадрат. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; Тип: объект По умолчанию: `{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }`
Calendar.monthLabel	Стиль для меток месяца, например: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; Тип: объект По умолчанию: `{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }`
Calendar.monthOutlineColor	Месяцы со значениями данных отделены от других с помощью границы в этом стиле. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } }; (см. также `calendar.unusedMonthOutlineColor` .) Тип: объект По умолчанию: `{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }`
Calendar.underMonthSpace	Количество пикселей между нижней частью меток месяца и верхней частью квадратов дня: var options = { calendar: { underMonthSpace: 12 } }; Тип: целое По умолчанию: 6
Calendar.underYearSpace	Количество пикселей между самой нижней меткой года и нижней частью диаграммы: var options = { calendar: { underYearSpace: 2 } }; Тип: целое По умолчанию: 0
Calendar.unusedMonthOutlineColor	Месяцы без значений данных отделяются от других с помощью границы в этом стиле. var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } }; (см. также `calendar.monthOutlineColor` .) Тип: объект По умолчанию: `{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }`
цветОсь	Объект, указывающий сопоставление между значениями столбца цвета и цветами или шкалой градиента. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {minValue: 0, colors: ['#FF0000', '#00FF00']} Тип: объект По умолчанию: ноль
colorAxis.colors	Цвета для назначения значениям в визуализации. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: `colorAxis: {colors:['red','#004411']}` . У вас должно быть как минимум два значения; градиент будет включать все ваши значения, а также рассчитанные промежуточные значения, причем первый цвет будет наименьшим значением, а последний цвет — максимальным. Тип: массив цветных строк По умолчанию: ноль
colorAxis.maxValue	Если присутствует, задает максимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и выше будут отображаться как последний цвет в диапазоне `colorAxis.colors` . Тип: номер По умолчанию: максимальное значение столбца цвета в данных диаграммы.
colorAxis.minValue	Если присутствует, указывает минимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и ниже будут отображаться как первый цвет в диапазоне `colorAxis.colors` . Тип: номер По умолчанию: минимальное значение столбца цвета в данных диаграммы.
colorAxis.значения	Если присутствует, управляет тем, как значения связаны с цветами. Каждое значение связано с соответствующим цветом в массиве `colorAxis.colors` . Эти значения применяются к данным цвета диаграммы. Окрашивание выполняется в соответствии с градиентом значений, указанных здесь. Отсутствие указания значения для этой опции эквивалентно указанию [minValue, maxValue]. Тип: массив чисел По умолчанию: ноль
ForceIFrame	Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 отображаются в i-фреймах.) Тип: логический По умолчанию: ложь
высота	Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента
NoDataPattern	Диаграммы календаря используют полосатый диагональный узор, чтобы указать, что для определенного дня нет данных. Используйте параметры `noDataPattern.backgroundColor` и `noDataPattern.color` , чтобы переопределить значения оттенков серого по умолчанию, например: noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } Тип: объект По умолчанию: ноль
tooltip.isHtml	Установите значение `false` , чтобы использовать всплывающие подсказки в формате SVG (а не HTML). Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца всплывающей подсказки не поддерживается визуализациями круговой диаграммы и пузырьковой диаграммы . Тип: логический По умолчанию: правда
ширина	Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента

Методы

Метод
`draw(data, options)`	Рисует график. Диаграмма принимает дальнейшие вызовы методов только после запуска события `ready` . `Extended description` . Тип возврата: нет
`getBoundingBox(id)`	Возвращает объект, содержащий левый, верхний, ширину и высоту `id` элемента диаграммы. Формат `id` еще не задокументирован (это возвращаемые значения обработчиков событий ), но вот несколько примеров: `var cli = chart.getChartLayoutInterface();` Высота области диаграммы `cli.getBoundingBox('chartarea').height` Ширина третьего столбца в первой серии гистограммы или гистограммы. `cli.getBoundingBox('bar#0#2').width` Ограничительная рамка пятого сегмента круговой диаграммы `cli.getBoundingBox('slice#4')` Граничная рамка данных вертикальной (например, столбчатой) диаграммы: `cli.getBoundingBox('vAxis#0#gridline')` Граничная рамка данных диаграммы горизонтальной (например, гистограммы): `cli.getBoundingBox('hAxis#0#gridline')` Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект
`getSelection()`	Возвращает массив выбранных объектов диаграммы. Доступными для выбора объектами являются столбцы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Для этой диаграммы в любой момент можно выбрать только один объект. `Extended description` . Тип возвращаемого значения: Массив элементов выбора
`setSelection()`	Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Доступными для выбора объектами являются столбцы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Для этой диаграммы одновременно может быть выбран только один объект. `Extended description` . Тип возврата: нет
`clearChart()`	Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет

События

Имя
`error`	Запускается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение
`onmouseover`	Запускается, когда пользователь наводит курсор мыши на визуальный объект. Возвращает индекс строки и значение даты сущности. Если для сущности нет элемента таблицы данных, для индекса строки возвращается значение `undefined` . Свойства: строка, дата
`onmouseout`	Запускается, когда пользователь уводит мышь от визуального объекта. Возвращает индекс строки и значение даты объекта. Если для сущности нет элемента таблицы данных, для индекса строки возвращается значение `undefined` . Строка свойств , дата
`ready`	Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода `draw` и вызывать их только после того, как событие было запущено. Свойства: нет
`select`	Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите `getSelection()` . Свойства: нет

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.