Визуализация: круговая диаграмма

Обзор

Круговая диаграмма, отображаемая в браузере с использованием SVG или VML . Отображает всплывающие подсказки при наведении курсора на фрагменты.

Пример 

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Создание 3D-круговой диаграммы

Если вы установите для параметра is3D значение true , ваша круговая диаграмма будет нарисована так, как если бы она имела три измерения:

По умолчанию is3D имеет false , поэтому здесь мы явно устанавливаем для него значение true :

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Создание кольцевой диаграммы

Кольцевая диаграмма — это круговая диаграмма с отверстием в центре. Вы можете создавать кольцевые диаграммы с помощью опции pieHole :

Для параметра pieHole должно быть установлено число от 0 до 1, соответствующее отношению радиусов отверстия и диаграммы. Числа от 0,4 до 0,6 будут выглядеть лучше всего на большинстве графиков. Значения, равные или превышающие 1, будут игнорироваться, а значение 0 полностью закроет вашу дырку.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Вы не можете комбинировать параметры pieHole и is3D ; если вы это сделаете, pieHole будет проигнорирован.

Обратите внимание, что Google Charts старается разместить метку как можно ближе к центру среза. Если у вас кольцевая диаграмма только с одним фрагментом, центр фрагмента может упасть в отверстие для кольцевого диаграммы. В этом случае измените цвет метки:

Параметры
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
Полный HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Вращение круговой диаграммы

По умолчанию круговые диаграммы начинаются с левого края первого фрагмента, направленного вверх. Вы можете изменить это с помощью опции pieStartAngle :

Здесь мы поворачиваем диаграмму по часовой стрелке на 100 градусов с опцией pieStartAngle: 100 . (Так выбрано потому, что именно под этим углом этикетка «Итальянский» помещается внутри среза.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Взрыв фрагмента

Вы можете отделить фрагменты круговой диаграммы от остальной части диаграммы с помощью свойства offset опции slices :

Чтобы отделить фрагмент, создайте объект slices и присвойте соответствующему номеру фрагмента offset от 0 до 1. Ниже мы назначаем постепенно увеличивающиеся смещения фрагментам 4 (гуджарати), 12 (маратхи), 14 (ория) и 15 (пенджаби). ):

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Удаление фрагментов

Чтобы пропустить фрагмент, измените цвет на 'transparent' :

Мы также использовали pieStartAngle для поворота диаграммы на 135 градусов, pieSliceText для удаления текста из срезов и tooltip.trigger для отключения всплывающих подсказок:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Порог видимости среза

Вы можете установить значение в качестве порога для индивидуальной визуализации фрагмента круговой диаграммы. Это значение соответствует части диаграммы (при этом вся диаграмма имеет значение 1). Чтобы установить этот порог в процентах от целого числа, разделите желаемый процент на 100 (для порога в 20 % значение будет 0,2).

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Любые фрагменты, меньшие этого порога, будут объединены в один фрагмент «Другое» и будут иметь объединенное значение всех фрагментов ниже порогового значения. 

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Загрузка

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

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

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

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

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

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

Столбцы:

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

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

Имя
фоновый цвет

Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: 'red' или '#00cc00' , либо объект со следующими свойствами.

Тип: строка или объект
По умолчанию: «белый»
фонЦвет.обводка

Цвет границы диаграммы в виде цветовой строки HTML.

Тип: строка
По умолчанию: '#666'
backgroundColor.strokeWidth

Ширина границы в пикселях.

Тип: номер
По умолчанию: 0
фонЦвет.заливка

Цвет заливки диаграммы в виде цветовой строки HTML.

Тип: строка
По умолчанию: «белый»
область диаграммы

Объект с элементами для настройки размещения и размера области диаграммы (где рисуется сама диаграмма, исключая оси и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Тип: объект
По умолчанию: ноль
chartArea.backgroundColor
Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, «#fdc»), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
  • stroke : цвет, представленный в виде шестнадцатеричной строки или английского названия цвета.
  • strokeWidth : если предусмотрено, рисует границу вокруг области диаграммы заданной ширины (и с цветом stroke ).
Тип: строка или объект
По умолчанию: «белый»
диаграммаArea.left

Насколько далеко рисовать диаграмму от левой границы.

Тип: число или строка.
По умолчанию: авто
диаграммаArea.top

На каком расстоянии рисовать диаграмму от верхней границы.

Тип: число или строка.
По умолчанию: авто
ChartArea.width

Ширина области диаграммы.

Тип: число или строка.
По умолчанию: авто
диаграммаArea.height

Высота области диаграммы.

Тип: число или строка.
По умолчанию: авто
цвета

Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: colors:['red','#004411'] .

Тип: Массив строк.
По умолчанию: цвета по умолчанию
включитьИнтерактивность

Определяет ли диаграмма события, связанные с пользователем, или реагирует на взаимодействие с пользователем. Если значение равно false, диаграмма не будет генерировать события «выбор» или другие события, основанные на взаимодействии (но будет генерировать события готовности или ошибки), а также не будет отображать наводящий текст или иным образом изменяться в зависимости от ввода пользователя.

Тип: логический
По умолчанию: правда
размер шрифта

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

Тип: номер
По умолчанию: автоматический
имя шрифта

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

Тип: строка
По умолчанию: «Ариал»
сила IFrame

Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.)

Тип: логический
По умолчанию: ложь
высота

Высота диаграммы в пикселях.

Тип: номер
По умолчанию: высота содержащего элемента.
is3D

Если это правда, отображается трехмерная диаграмма.

Тип: логический
По умолчанию: ложь
легенда

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Тип: объект
По умолчанию: ноль
легенда.выравнивание

Согласование легенды. Может быть одним из следующих:

  • «start» — выравнивается по началу области, выделенной для легенды.
  • 'center' — центрируется в области, отведенной для легенды.
  • «конец» — выравнивается по концу области, выделенной для легенды.

Начало, центр и конец зависят от стиля легенды (вертикального или горизонтального). Например, в «правой» легенде «начало» и «конец» находятся вверху и внизу соответственно; для «верхней» легенды «начало» и «конец» будут находиться слева и справа от области соответственно.

Значение по умолчанию зависит от положения легенды. Для «нижних» легенд по умолчанию используется «центр»; другие легенды по умолчанию имеют значение «старт».

Тип: строка
По умолчанию: автоматический
легенда.позиция

Позиция легенды. Может быть одним из следующих:

  • «снизу» — отображает легенду под диаграммой.
  • 'labeled' — рисует линии, соединяющие срезы с их значениями данных.
  • «left» — отображает легенду слева от диаграммы.
  • 'none' — легенда не отображается.
  • «right» — отображает легенду справа от диаграммы.
  • «top» — отображает легенду над диаграммой.
Тип: строка
По умолчанию: «право»
легенда.maxLines

Максимальное количество строк в легенде. Установите для этого числа значение больше единицы, чтобы добавить строки в легенду. Примечание. Точная логика, используемая для определения фактического количества отображаемых строк, все еще находится в стадии разработки.

В настоящее время эта опция работает только тогда, когда Legend.position имеет значение «top».

Тип: номер
По умолчанию: 1
Legend.textStyle

Объект, определяющий стиль текста легенды. Объект имеет следующий формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
пирогДыра

Если между 0 и 1, отображается кольцевая диаграмма. Отверстие имеет радиус, равный number радиусов диаграммы.

Тип: номер
По умолчанию: 0
пирогЛомтикГраницаЦвет

Цвет границ среза. Применимо только в том случае, если диаграмма двумерная.

Тип: строка
По умолчанию: «белый»
пирогЛомтикТекст

Содержимое текста, отображаемого на срезе. Может быть одним из следующих:

  • «процент» — процент размера среза от общего числа.
  • 'value' — Количественное значение среза.
  • «метка» — имя среза.
  • «нет» — текст не отображается.
Тип: строка
По умолчанию: «процент»
пирогSliceTextStyle

Объект, определяющий стиль текста фрагмента. Объект имеет следующий формат:

{color: <string>, fontName: <string>, fontSize: <number>}

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
пирогStartAngle

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

Тип: номер
По умолчанию: 0
обратныеКатегории

Если true, срезы рисуются против часовой стрелки. По умолчанию рисование осуществляется по часовой стрелке.

Тип: логический
По умолчанию: ложь
пирогОстатокЛомтикЦвет

Цвет комбинированного фрагмента, содержащего все фрагменты ниже срезаVisibilityThreshold.

Тип: строка
По умолчанию: '#ccc'
пирогОстатокЛомтикМетка

Метка для комбинированного среза, который содержит все срезы ниже слайсаVisibilityThreshold .

Тип: строка
По умолчанию: «Другое»
ломтики

Массив объектов, каждый из которых описывает формат соответствующего фрагмента диаграммы. Чтобы использовать значения по умолчанию для среза, укажите пустой объект (т. е. {} ). Если срез или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:

  • color — цвет, используемый для этого фрагмента. Укажите допустимую цветовую строку HTML.
  • offset — насколько далеко отделить фрагмент от остальной части круга, от 0,0 (совсем нет) до 1,0 (радиус круга).
  • textStyle — переопределяет глобальный pieSliceTextStyle для этого фрагмента.

Вы можете указать либо массив объектов, каждый из которых применяется к срезу в указанном порядке, либо вы можете указать объект, в котором каждый дочерний элемент имеет числовой ключ, указывающий, к какому срезу он применяется. Например, следующие два объявления идентичны и объявляют первый срез черным, а четвертый — красным:

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Тип: Массив объектов или объект со вложенными объектами.
По умолчанию: {}
срезVisibilityThreshold

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

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Тип: номер
По умолчанию: полградуса (0,5/360 или 1/720 или 0,0014).
заголовок

Текст, который будет отображаться над диаграммой.

Тип: строка
По умолчанию: без заголовка
заголовокTextStyle

Объект, определяющий стиль текста заголовка. Объект имеет следующий формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
подсказка

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Тип: объект
По умолчанию: ноль
Tooltip.ignoreBounds

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

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

Тип: логический
По умолчанию: ложь
подсказка.isHtml

Если установлено значение true, используйте всплывающие подсказки, отображаемые в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе «Настройка содержимого всплывающей подсказки» .

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

Тип: логический
По умолчанию: ложь
Tooltip.showColorCode

Если это правда, отображаются цветные квадраты рядом с информацией о срезе во всплывающей подсказке.

Тип: логический
По умолчанию: ложь
подсказка.текст

Какую информацию отображать, когда пользователь наводит курсор на кусок диаграммы? Поддерживаются следующие значения:

  • 'both' - [ По умолчанию ] Отображает как абсолютное значение среза, так и процент от целого.
  • «значение» — отображать только абсолютное значение среза.
  • «процент» — отображать только процент от целого, представленного срезом.
Тип: строка
По умолчанию: «оба»
Tooltip.textStyle

Объект, определяющий стиль текста подсказки. Объект имеет следующий формат:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color может быть любой цветовой строкой HTML, например: 'red' или '#00cc00' . Также см. fontName и fontSize .

Тип: объект
По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
подсказка.триггер

Взаимодействие пользователя, вызывающее отображение всплывающей подсказки:

  • «фокус» — всплывающая подсказка будет отображаться, когда пользователь наводит курсор на элемент.
  • «нет» — всплывающая подсказка не будет отображаться.
  • «выбор» — всплывающая подсказка будет отображаться, когда пользователь выбирает элемент.
Тип: строка
По умолчанию: «фокус»
ширина

Ширина диаграммы в пикселях.

Тип: номер
По умолчанию: ширина содержащего элемента.

Методы

Метод
draw(data, options)

Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события ready . Extended description .

Тип возврата: нет
getAction(actionID)

Возвращает объект действия всплывающей подсказки с запрошенным actionID .

Тип возвращаемого значения: объект
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')

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

Тип возвращаемого значения: объект
getChartAreaBoundingBox()

Возвращает объект, содержащий левую, верхнюю, ширину и высоту содержимого диаграммы (т. е. исключая метки и легенду):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

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

Тип возвращаемого значения: объект
getChartLayoutInterface()

Возвращает объект, содержащий информацию о расположении диаграммы и ее элементов на экране.

К возвращаемому объекту можно вызвать следующие методы:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Вызовите это после того, как диаграмма будет нарисована.

Тип возвращаемого значения: объект
getHAxisValue(xPosition, optional_axis_index)

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

Пример: chart.getChartLayoutInterface().getHAxisValue(400) .

Вызовите это после того, как диаграмма будет нарисована.

Тип возврата: число
getImageURI()

Возвращает диаграмму, сериализованную как URI изображения.

Вызовите это после того, как диаграмма будет нарисована.

См. Печать диаграмм PNG .

Тип возвращаемого значения: строка
getSelection()

Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются фрагменты и записи легенды. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Extended description .

Тип возвращаемого значения: Массив элементов выбора.
getVAxisValue(yPosition, optional_axis_index)

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

Пример: chart.getChartLayoutInterface().getVAxisValue(300) .

Вызовите это после того, как диаграмма будет нарисована.

Тип возврата: число
getXLocation(dataValue, optional_axis_index)

Возвращает координату x в пикселях dataValue относительно левого края контейнера диаграммы.

Пример: chart.getChartLayoutInterface().getXLocation(400) .

Вызовите это после того, как диаграмма будет нарисована.

Тип возврата: число
getYLocation(dataValue, optional_axis_index)

Возвращает координату y в пикселях dataValue относительно верхнего края контейнера диаграммы.

Пример: chart.getChartLayoutInterface().getYLocation(300) .

Вызовите это после того, как диаграмма будет нарисована.

Тип возврата: число
removeAction(actionID)

Удаляет действие всплывающей подсказки с запрошенным actionID с диаграммы.

Тип возврата: none
setAction(action)

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

Метод setAction принимает объект в качестве параметра действия. Этот объект должен указать 3 свойства: id — идентификатор задаваемого действия, text — текст, который должен появиться во всплывающей подсказке для действия, и action — функция, которая должна запускаться, когда пользователь нажимает на текст действия.

Любые действия подсказки должны быть установлены до вызова метода draw() диаграммы. Расширенное описание .

Тип возврата: none
setSelection()

Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются фрагменты и записи легенды. Для этой диаграммы одновременно можно выбрать только одну сущность. Extended description .

Тип возврата: нет
clearChart()

Очищает диаграмму и освобождает все выделенные ресурсы.

Тип возврата: нет

События

Дополнительные сведения о том, как использовать эти события, см. в разделах «Базовое взаимодействие» , «Обработка событий» и «Инициирование событий» .

Имя
click

Запускается, когда пользователь щелкает внутри диаграммы. Может использоваться для определения момента щелчка по заголовку, элементам данных, записям легенды, осям, линиям сетки или меткам.

Свойства: целевойID
error

Вызывается, когда возникает ошибка при попытке отобразить диаграмму.

Свойства: идентификатор, сообщение
onmouseover

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

Свойства: строка, столбец
onmouseout

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

Свойства: строка, столбец
ready

Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода draw и вызывать их только после того, как событие было запущено.

Свойства: нет
select

Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите getSelection() .

Свойства: нет

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

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