Роли столбца

На этой странице описывается концепция и использование ролей в таблицах данных диаграммы.

  1. Что такое роли?
  2. Какие роли доступны?
  3. Иерархия ролей и ассоциативность
  4. Назначение роли

Что такое роли?

Объекты Google DataTable и DataView теперь поддерживают явно назначенные роли столбцов . Роль столбца описывает назначение данных в этом столбце: например, столбец может содержать данные, описывающие текст всплывающей подсказки, аннотации к точкам данных или индикаторы неопределенности. Большинство ролей столбца применяются к столбцу данных, предшествующему ему, независимо от того, находится ли он непосредственно перед ним или перед первым из последовательной группы столбцов ролей. Например, после столбца «данные» можно разместить два столбца: один для «подсказки», а другой для «аннотации». Но после столбца «домен» мы также обычно разрешаем роли столбцов «аннотация» и «аннотациятекст».

Примечание. Если вы хотите управлять содержимым всплывающих подсказок, которые появляются, когда пользователь наводит курсор на диаграмму, см. «Подсказки» .

Первоначально для столбца было доступно только две роли: «домен», который определяет значения главной оси; и «данные», которые определяют высоту столбцов, ширину секторов и т. д. Эти роли были назначены неявно, в зависимости от порядка и типа столбцов в таблице. Однако благодаря возможности явно назначать роли столбцов теперь вы можете добавлять дополнительные столбцы, которые предоставляют диаграмме новые интересные функции, такие как произвольные метки аннотаций, наводящий текст и полосы неопределенности.

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

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

Формат таблицы данных линейной диаграммы :

Столбец 0 Столбец 1 ... Столбец N
Цель Значения строки 1 ... Значения строки N
Тип данных число ... число
Роль домен данные ... данные
Опционально поддерживается
роли столбцов
  • аннотация
  • аннотацияТекст
  • аннотация
  • аннотацияТекст
  • уверенность
  • акцент
  • интервал
  • объем
  • стиль
  • подсказка
 ...
  • аннотация
  • аннотацияТекст
  • уверенность
  • акцент
  • интервал
  • объем
  • стиль
  • подсказка

Диаграмма без явных ролей столбцов Диаграмма с явными ролями столбцов

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

Таблица данных:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

Эта диаграмма явно назначает роли, поэтому можно добавлять дополнительные столбцы. На этой диаграмме есть дополнительные столбцы для ролей аннотации, annotationText, интервала и уверенности.

  • столбцы аннотаций указывают статические метки на диаграмме; здесь «A», «B», «C» — аннотации.
  • Столбцы annotationText определяют наводящий текст при наведении курсора мыши на аннотацию ( а не на точку данных).
  • Столбцы интервалов указывают верхнюю и нижнюю точки I-баров на графике. На графике имеется три I-бара.
  • Столбцы достоверности указывают, являются ли данные на данный момент достоверными. Последняя точка данных неопределенна, поэтому линия, ведущая к ней, пунктирная.

Таблица данных:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

Какие роли доступны?

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

Роль Описание Пример
аннотация

Текст для отображения на диаграмме рядом со связанной точкой данных. Текст отображается без какого-либо взаимодействия с пользователем. Аннотации и текст аннотаций можно назначать как точкам данных, так и категориям (меткам осей).

Существует два стиля аннотаций: точка ( по умолчанию ), при которой текст аннотации рисуется рядом с указанной точкой, и линия, при которой текст аннотации рисуется на линии, разделяющей область диаграммы пополам. Вы можете указать стиль линии, установив этот параметр диаграммы: annotations: {' column_id ': {style: 'line'}}

Тип данных: строка

По умолчанию: пустая строка

Данные:

метка : «Год», «Продажи», ноль, ноль, «Расходы», ноль, нулевая роль : домен, данные, аннотация, annotationText, данные, аннотация, annotationText «2004», 1000, ноль, ноль, 400, ноль, null '2005', 1170, null, null, 460, 'A', 'Разработка новой модели' '2006', 660, 'B', 'Запущена новая модель', 1120, null, null '2007', 1030, null , ноль, 540, ноль, ноль

Буквы «А» и «Б» на этой диаграмме являются аннотациями. Наведите курсор на аннотацию, чтобы увидеть текст аннотации. Обратите внимание, что для отображения значения annotationText необходимо навести указатель мыши на аннотацию, а не на точку данных, к которой она применяется.

Нулевые значения принимаются как для ячеек аннотации, так и для ячеек annotationText; однако если у вас есть значение annotationText, у вас должно быть связанное значение аннотации.

аннотацияТекст

Расширенный текст, отображаемый при наведении указателя мыши на связанную аннотацию. Аннотации и текст аннотаций можно назначать как точкам данных, так и категориям (меткам осей). Если у вас есть столбец annotationText, у вас также должен быть столбец аннотаций. Текст подсказки, напротив, отображается, когда пользователь наводит указатель мыши на связанную точку данных на диаграмме.

Тип данных: строка

По умолчанию: пустая строка

уверенность

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

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

Тип данных: логический , где истинное значение является достоверным, ложное — неопределенное.

По умолчанию: правда

акцент

Подчеркивает указанные точки данных диаграммы. Отображается толстой линией и/или большой точкой.

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

Тип данных: логический

По умолчанию: ложь

Данные:

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

На этой диаграмме серия «Продажи» имеет один выделенный сегмент, обозначенный третьим столбцом, первой и второй строками. Серия «Расходы» состоит из двух выделенных сегментов, обозначенных пятым столбцом, второй, третьей и четвертой строками. Обратите внимание, что акцент требует подчеркнуть обе ограничивающие точки.

интервал

Указывает потенциальный диапазон данных для конкретной точки. Интервалы обычно отображаются в виде индикаторов диапазона в стиле I-bar. Столбцы интервалов — это числовые столбцы; добавьте столбцы интервалов парами, отмечая минимальное и максимальное значение столбца. Значения интервалов следует добавлять по возрастанию, слева направо.

Тип данных: число

По умолчанию: без интервала

Данные:

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

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

Примечание. Подробную информацию об интервалах см. в разделе «Интервалы» .

объем

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

Для линейных диаграмм и диаграмм с областями сегмент между двумя точками данных находится в области, если в области находится любая конечная точка.

Тип данных: boolean , где true означает область действия.

По умолчанию: правда

Данные:

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

Первый столбец области действия применяется к столбцу данных «Продажи» слева от него. Первый сегмент отображается вне области видимости, поскольку обе граничные точки находятся вне области видимости. Второй столбец области действия применяется к столбцу данных «Расходы» слева от него. Первый сегмент помечен как входящий в область действия, поскольку одна из его граничных точек находится в области видимости; остальная часть линии выходит за рамки, поскольку все остальные точки помечены как выходящие за рамки.

стиль

Стилизирует определенные свойства различных аспектов ваших данных. Эти ценности:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Тип данных: string , где можно применить несколько стилей с помощью 'firstProperty: value; secondProperty: value' или задайте определенные стили для bar, line, и point , указав тип и заключив свойства стиля в фигурные скобки (например, bar { //properties go here } ).

По умолчанию: ноль

Данные:

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

На этой диаграмме стиль каждого столбца определен независимо от других с использованием роли столбца style . Стили можно установить специально для точки, линии или столбца (см. строку Человека-паука) или в целом, при этом стили будут применяться ко всем точкам, линиям и столбцам, в зависимости от типа диаграммы.

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

подсказка

Текст, отображаемый при наведении указателя мыши на точку данных, связанную с этой строкой.

Примечание. Это не поддерживается визуализацией пузырьковой диаграммы . Содержимое HTML-подсказок пузырьковой диаграммы не подлежит настройке.

Тип данных: строка

По умолчанию: значение точки данных.

Данные:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

Наведите указатель мыши на точки данных, чтобы отобразить текст всплывающей подсказки. Данные подсказки присваиваются всем точкам в обеих строках, в столбцах 3 и 5.

Примечание. Дополнительные сведения о настройке всплывающих подсказок см. в разделе «Подсказки» .

домен

Вам не нужно явно назначать эту роль, если только вы не разрабатываете многодоменную диаграмму (показано здесь); базовый формат таблицы данных позволяет механизму построения диаграмм определить, какие столбцы являются столбцами домена. Однако вам следует знать, какие столбцы являются столбцами домена, чтобы знать, какие другие столбцы могут его изменить.

Столбцы доменов определяют метки вдоль главной оси диаграммы. Иногда можно использовать несколько столбцов домена для поддержки нескольких шкал на одной диаграмме.

Тип данных: обычно строка , но иногда число или дата.

Данные: 

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

В этом примере показана многодоменная диаграмма. Первые два столбца данных изменяют первый домен («Квартал 2009 г.»), а последние два столбца данных изменяют второй домен («Квартал 2008 г.»). Обе области наложены на одни и те же масштабы осей.

данные

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

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

Тип данных: число

Иерархия ролей и ассоциативность

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

Так, например, столбец области действия применяется к ближайшему столбцу данных слева от него; столбец annotationText будет применяться к ближайшему столбцу аннотаций слева от него; аннотация будет применена к ближайшему столбцу данных или домена слева от нее.

Назначение роли

Роли назначаются как свойство столбца в объекте DataTable. Существует несколько способов создания столбца роли, но вот наиболее распространенные:

Первые два метода рисуют следующую диаграмму:

Метод DataTable.addColumn

В следующем примере создается гистограмма с маркером интервала на трех столбцах. Маркеры интервала задаются третьим и четвертым столбцами с помощью метода DataTable.addColumn() .

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

Литеральная нотация JavaScript

В литерале JSON необходимо указать свойство p столбца со значением "role":"role-type" . В следующем примере показано, как указать роли с помощью литеральной нотации JavaScript. Это можно сделать только во время создания таблицы.

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

Метод DataView.setColumns

При создании представления вы можете явно указать роль столбца. Это полезно при создании нового вычисляемого столбца. См. DataView.setColumns() для получения дополнительной информации.