Эта страница переведена с помощью 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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Загрузка

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

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

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

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

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

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

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

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

Методы

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

События

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

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

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

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