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

Визуализация: столбчатая диаграмма (старая версия)

Устарело

Эта визуализация заменена новой версией ; пожалуйста, используйте это вместо этого. Для упрощения миграции обратитесь к странице примечаний к выпуску .

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

Обзор

Вертикальная гистограмма, отображаемая в браузере с использованием SVG или VML. Отображает подсказки при нажатии на точки. Анимирует линии при нажатии на записи легенды. Горизонтальную версию этой диаграммы см. в виде гистограммы .

Автор: Google

Пример

Напишите код самостоятельно на игровой площадке визуализации

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Загрузка

Имя пакета google.load — "columnchart"

  google.load("visualization", "1", {packages: ["columnchart"]});

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

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

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

Каждая строка таблицы представляет собой группу соседних столбцов.

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

Значение в данной строке и столбце управляет высотой отдельной полосы, представленной этой строкой и столбцом.

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

Имя	Тип	По умолчанию	Описание
осьЦвет	строка или объект	цвет по умолчанию	Цвет оси. Возможные значения такие же, как для параметра конфигурации backgroundColor .
осьФонЦвет	строка или объект	цвет по умолчанию	Граница вокруг фона оси. Возможные значения такие же, как для параметра конфигурации backgroundColor .
осьFontSize	число	автоматический	Размер шрифта текста оси диаграммы в пикселях.
фоновый цвет	строка или объект	цвет по умолчанию	Цвет фона основной области диаграммы. Может быть один из следующих вариантов: Строка цвета, поддерживаемого HTML, например «красный» или «#00cc00». Объект со свойствами `stroke` `fill` и `strokeSize` . `stroke` и `fill` должны быть строкой с цветом. StrokeSize — это число. Например: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}` . Чтобы использовать только заливку без обводки, используйте `stroke:null, strokeSize: 0` .
цвет границы	строка или объект	цвет по умолчанию	Граница вокруг элементов диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor .
цвета	Массив строк или объектов	Цвета по умолчанию	Массив цветов, где каждый элемент задает цвет одной серии. Для каждой серии необходимо указать один элемент массива. Если `is3D=false` , это массив цветов HTML. Пример: цвета:['#00FF00','orange'] Если `is3D=true` , это массив цветов HTML или объектов следующего типа: `{color: face_color , darker: shade_color }` где `color` — это цвет грани элемента, а `darker` — цвет тени. Однако если вы укажете цвет HTML для 3D-объекта, грань и тень будут одного цвета, а 3D-эффект будет уменьшен. Пример: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
включить подсказку	логическое значение	истинный	Если установлено значение true, всплывающие подсказки отображаются, когда пользователь щелкает столбец.
фокусГраницаЦвет	строка или объект	цвет по умолчанию	Граница вокруг элементов диаграммы, находящихся в фокусе (указанных мышью). Возможные значения такие же, как для параметра конфигурации backgroundColor .
высота	число	Высота контейнера	Высота диаграммы в пикселях.
is3D	логическое значение	ЛОЖЬ	Если установлено значение true, отображается трехмерное изменение.
isStacked	логическое значение	ЛОЖЬ	Если установлено значение true, значения строк складываются (накапливаются).
легенда	нить	'верно'	Расположение и тип легенды. Может быть одним из следующих: 'right' - Справа от диаграммы. «left» — слева от диаграммы. 'top' - Над графиком. «дно» — под графиком. 'none' — легенда не отображается.
легендаФонЦвет	строка или объект	цвет по умолчанию	Цвет фона области легенды диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor .
LegendFontSize	число	автоматический	Размер шрифта легенды в пикселях.
легендаТекстЦвет	строка или объект	цвет по умолчанию	Цвет текстовых записей легенды. Возможные значения такие же, как для параметра конфигурации backgroundColor .
logScale	логическое значение	ЛОЖЬ	Если это правда, главная ось должна масштабироваться логарифмически.
Макс	число	автоматический	Указывает самую высокую линию сетки по оси Y. Фактическая линия сетки будет иметь большее из двух значений: максимальное значение параметра или наибольшее значение данных, округленное до следующей более высокой отметки сетки.
мин	число	автоматический	Указывает самую нижнюю линию сетки по оси Y. Фактическая линия сетки будет меньшим из двух значений: минимального значения параметра или наименьшего значения данных, округленного до следующей нижней отметки сетки.
обратная ось	логическое значение	ЛОЖЬ	Если установлено значение true, категории будут рисоваться справа налево. По умолчанию рисование осуществляется слева направо.
показатьКатегории	логическое значение	истинный	Если это правда, будут показаны метки категорий. Если ложь, то не будет.
заголовок	нить	без заголовка	Текст, который будет отображаться над диаграммой.
заголовокX	нить	без заголовка	Текст для отображения под горизонтальной осью.
заголовокY	нить	без заголовка	Текст для отображения по вертикальной оси.
заголовокЦвет	строка или объект	цвет по умолчанию	Цвет заголовка диаграммы. Возможные значения такие же, как для параметра конфигурации backgroundColor .
заголовокFontSize	число	автоматический	Размер шрифта заголовка диаграммы в пикселях.
подсказкаFontSize	число	11	Размер шрифта текста подсказки. Это можно уменьшить, если всплывающая подсказка слишком мала для размещения текста указанным шрифтом.
подсказкаВысота	число	60	Высота всплывающей подсказки в пикселях. Высота подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться в соответствии с длиной или размером шрифта текста. Но все, что превышает 1/3 высоты диаграммы, будет обрезано.
ширина подсказки	число	120	Ширина всплывающей подсказки в пикселях. Ширина подсказки фиксирована; он никогда не будет увеличиваться или уменьшаться в соответствии с длиной или размером шрифта текста. Но все, что превышает ширину диаграммы, будет обрезано.
ширина	число	Ширина контейнера	Ширина диаграммы в пикселях.

Методы

Метод	Тип возврата	Описание
`draw(data, options)`	никто	Рисует диаграмму.
`getSelection()`	Массив элементов выбора	Стандартная реализация `getSelection()` . Выбранными элементами являются элементы столбца и ячейки. Пользователь может выбрать только один столбец или ячейку одновременно.
`setSelection()`	никто	Стандартная реализация `setSelection()` , но поддерживает выбор только одного элемента. Рассматривает каждую запись выбора как выбор столбца или ячейки. Обратите внимание, что столбец метки не может быть выбран.

События

Имя	Описание	Характеристики
`onmouseover`	Вызывается, когда пользователь наводит указатель мыши на полосу и передает индексы строк и столбцов соответствующей ячейки.	строка столбец
`onmouseout`	Вызывается, когда пользователь уводит указатель мыши от панели и передает индексы строк и столбцов соответствующей ячейки.	строка столбец
`ready`	Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель для этого события перед вызовом метода `draw` и вызывать их только после того, как событие было запущено.	Никто
`select`	Запускается, когда пользователь щелкает полосу или легенду. Когда выбран столбец, выбирается соответствующая ячейка в таблице данных; при выборе легенды выбирается соответствующий столбец в таблице данных. Чтобы узнать, что было выбрано, вызовите `getSelection()` .	Никто

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

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

Визуализация: столбчатая диаграмма (старая версия) Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.