Визуализация: точечная диаграмма

Обзор

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

Точечные диаграммы Google отображаются в браузере с использованием SVG или VML в зависимости от возможностей браузера.

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); }
<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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

Изменение и анимация фигур

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

Как и в большинстве других Google Charts, вы можете анимировать их с помощью событий . Вы можете добавить прослушиватель событий для первого ready события и перерисовать диаграмму после внесения необходимых изменений. После первого ready события вы можете прослушать событие animationfinish , чтобы повторить процесс, что приведет к непрерывной анимации. Опция animation управляет тем, как происходит перерисовка: немедленно (без анимации) или плавно, и если плавно, то как быстро и с каким поведением.

Хорошие детали
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
Полный 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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Создание точечных диаграмм материалов

В 2014 году компания Google объявила о руководящих принципах, направленных на поддержку единого внешнего вида своих свойств и приложений (например, приложений для Android), работающих на платформах Google. Мы называем эту работу Material Design . Мы будем предоставлять «Материальные» версии всех наших основных диаграмм; вы можете использовать их, если вам нравится, как они выглядят.

Создание точечной диаграммы материалов похоже на создание того, что мы сейчас назовем «классической» точечной диаграммой. Вы загружаете Google Visualization API (хотя и с пакетом 'scatter' вместо пакета 'corechart' ), определяете свои данные, а затем создаете объект (но класса google.charts.Scatter вместо google.visualization.ScatterChart ).

Примечание. Диаграммы материалов не будут работать в старых версиях Internet Explorer. (IE8 и более ранние версии не поддерживают SVG, который требуется для диаграмм материалов.)

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }

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

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

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

Также способ объявления опций не доработан, так что если вы используете какие-либо из классических опций, вы должны преобразовать их в материальные опции, заменив эту строку:

chart.draw(data, options);

...с этим:

chart.draw(data, google.charts.Scatter.convertOptions(options));

Диаграммы Dual-Y

Иногда вам может понадобиться отобразить два ряда на точечной диаграмме с двумя независимыми осями Y: левая ось для одного ряда и правая ось для другого:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };

Обратите внимание, что две наши оси Y не только помечены по-разному («Оценка итогового экзамена» и «Отработанные часы»), но каждая из них имеет свои собственные независимые шкалы и линии сетки. Если вы хотите настроить это поведение, используйте параметры vAxis.gridlines .

В приведенном ниже коде параметры axes и series вместе определяют внешний вид диаграммы с двойной Y. Параметр series указывает, какую ось использовать для каждого ( 'final grade' и 'hours studied' ; они не должны иметь никакого отношения к именам столбцов в таблице данных). Параметр axes затем делает эту диаграмму двойной диаграммой Y, помещая ось 'Final Exam Grade' слева, а ось 'Hours Studied' справа.

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

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

Чарты Top-X

Примечание. Оси Top-X доступны только для диаграмм материалов (т. е. с scatter пакетов).

Если вы хотите поместить метки и заголовок оси X вверху диаграммы, а не внизу, вы можете сделать это в диаграммах материалов с помощью параметра axes.x :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Загрузка

Имя пакета google.charts.load — "corechart" , а имя класса визуализации — google.visualization.ScatterChart .

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

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

Для точечных диаграмм материалов имя пакета google.charts.load — "scatter" , а имя класса визуализации — google.charts.Scatter .

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

  var visualization = new google.charts.Scatter(container);

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

Строки: Каждая строка в таблице представляет собой набор точек данных с одинаковым значением по оси X.

Столбцы:

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

Никто

 ...

Чтобы указать несколько рядов, укажите два или более столбца оси Y и укажите значения Y только в одном столбце Y:

X-значения Серия 1 Y Значения Серия 2 Y Значения
10 нулевой 75
20 нулевой 18
33 нулевой 22
55 16 нулевой
14 61 нулевой
48 3 нулевой

Варианты конфигурации

Имя
агрегацияЦель
Как множественный выбор данных сводится во всплывающие подсказки:
  • 'category' : Сгруппировать выбранные данные по x-значению.
  • 'series' : группировать выбранные данные по сериям.
  • 'auto' : группировать выбранные данные по значению x, если все выборки имеют одинаковое значение x, и по сериям в противном случае.
  • 'none' : показывать только одну всплывающую подсказку для каждого выбора.
aggregationTarget часто используется в тандеме с selectionMode и tooltip.trigger , например:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Тип: строка
По умолчанию: «авто»
анимация.длительность

Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации .

Тип: номер
По умолчанию: 0
анимация.ослабление

Функция замедления применяется к анимации. Доступны следующие варианты:

  • «линейный» — постоянная скорость.
  • 'in' - Легкость - Начинайте медленно и ускоряйтесь.
  • 'out' - Ease out - Начните быстро и медленно.
  • 'inAndOut' - Легкость входа и выхода - Начинайте медленно, ускоряйтесь, затем замедляйтесь.
Тип: строка
По умолчанию: «линейный»
анимация.стартап

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

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

Для диаграмм, поддерживающих аннотации , объект annotations.boxStyle управляет внешним видом полей, окружающих аннотации:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

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

Тип: объект
По умолчанию: ноль
аннотации.датум
Для диаграмм, поддерживающих аннотации , объект annotations.datum позволяет переопределить выбор Google Charts для аннотаций, предоставленных для отдельных элементов данных (например, значений, отображаемых с каждым столбцом на гистограмме). Вы можете управлять цветом с помощью annotations.datum.stem.color , длиной основы с помощью annotations.datum.stem.length и стилем с помощью annotations.datum.style .
Тип: объект
По умолчанию: цвет «черный»; длина 12; стиль "точка".
annotations.domain
Для диаграмм, поддерживающих аннотации , объект annotations.domain позволяет переопределить выбор Google Charts для аннотаций, предоставленных для домена (большая ось диаграммы, например ось X на типичной линейной диаграмме). Вы можете управлять цветом с помощью annotations.domain.stem.color , длиной основы с помощью annotations.domain.stem.length и стилем с помощью annotations.domain.style .
Тип: объект
По умолчанию: цвет «черный»; длина 5; стиль "точка".
аннотации.highContrast
Для диаграмм, поддерживающих аннотации , логическое значение annotations.highContrast позволяет переопределить выбор цвета аннотаций Google Charts. По умолчанию annotations.highContrast имеет значение true, что заставляет диаграммы выбирать цвет аннотаций с хорошей контрастностью: светлые цвета на темном фоне и темные на светлом. Если вы установите для annotations.highContrast значение false и не укажете собственный цвет аннотации, Google Charts будет использовать для аннотации цвет ряда по умолчанию:
Тип: логический
По умолчанию: правда
annotations.stem
Для диаграмм, поддерживающих аннотации , объект annotations.stem позволяет переопределить выбор Google Charts для стиля основы. Вы можете управлять цветом с помощью annotations.stem.color и длиной основы с помощью annotations.stem.length . Обратите внимание, что параметр длины основы не влияет на аннотации со стилем 'line' : для аннотаций базы 'line' длина основы всегда совпадает с длиной текста, а для аннотаций домена 'line' основа распространяется на всю диаграмму. .
Тип: объект
По умолчанию: цвет «черный»; длина равна 5 для аннотаций домена и 12 для аннотаций базы.
аннотации.стиль
Для диаграмм, поддерживающих аннотации , параметр annotations.style позволяет переопределить выбор типа аннотаций Google Charts. Это может быть 'line' или 'point' .
Тип: строка
По умолчанию: «точка»
аннотации.textStyle
Для диаграмм, поддерживающих аннотации , объект annotations.textStyle управляет внешним видом текста аннотации:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

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

Тип: объект
По умолчанию: ноль
осьTitlesPosition

Где размещать заголовки осей по сравнению с областью диаграммы. Поддерживаемые значения:

  • in — рисовать заголовки осей внутри области диаграммы.
  • out — Нарисуйте заголовки осей за пределами области диаграммы.
  • none — не указывать заголовки осей.
Тип: строка
По умолчанию: «вне»
фоновый цвет

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

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

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

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

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

Тип: номер
По умолчанию: 0
backgroundColor.fill

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

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

Для диаграмм материалов этот параметр указывает заголовок.

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

Для диаграмм материалов этот параметр определяет подзаголовок. Только таблицы материалов поддерживают субтитры.

Тип: строка
По умолчанию: ноль
диаграммаОбласть

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

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

Как далеко рисовать график от левой границы.

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

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

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

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

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

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

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

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

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

Объект, содержащий свойства перекрестия для диаграммы.

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

Цвет перекрестия, выраженный в виде названия цвета (например, "синий") или значения RGB (например, "#adf").

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

Объект, содержащий свойства перекрестия при фокусировке.
Пример: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Тип: объект
По умолчанию: по умолчанию
перекрестие.непрозрачность

Непрозрачность перекрестия, где 0.0 означает полную прозрачность, а 1.0 — полную непрозрачность.

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

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

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

Объект, содержащий свойства перекрестия при выборе.
Пример: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

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

Когда отображать перекрестие: на 'focus' , 'selection' или 'both' .

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

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

  • 'none' - Прямые линии без кривых.
  • 'function' - углы линии будут сглажены.
Тип: строка
По умолчанию: «нет»
непрозрачность данных

Прозрачность точек данных, где 1.0 означает полную непрозрачность, а 0.0 — полную прозрачность. В точечных диаграммах, гистограммах, гистограммах и столбцах это относится к видимым данным: точкам в точечной диаграмме и прямоугольникам в остальных. На диаграммах, где при выборе данных создается точка, например, на линейных диаграммах и диаграммах с областями, это относится к кругам, которые появляются при наведении или выборе. Комбинированная диаграмма демонстрирует оба поведения, и этот параметр не влияет на другие диаграммы. (Чтобы изменить непрозрачность линии тренда, см. раздел непрозрачность линии тренда.)

Тип: номер
По умолчанию: 1,0
включитьИнтерактивность

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

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

Опция explorer позволяет пользователям перемещать и масштабировать диаграммы Google. explorer: {} обеспечивает поведение проводника по умолчанию, позволяя пользователям перемещаться по горизонтали и вертикали с помощью перетаскивания, а также увеличивать и уменьшать масштаб с помощью прокрутки.

Эта функция является экспериментальной и может измениться в будущих выпусках.

Примечание . Проводник работает только с непрерывными осями (такими как числа или даты).

Тип: объект
По умолчанию: ноль
explorer.actions

Проводник Google Charts поддерживает три действия:

  • dragToPan : Перетащите, чтобы панорамировать диаграмму по горизонтали и вертикали. Чтобы панорамировать только по горизонтальной оси, используйте explorer: { axis: 'horizontal' } . Аналогично для вертикальной оси.
  • dragToZoom : проводник по умолчанию увеличивает и уменьшает масштаб при прокрутке пользователем. Если explorer: { actions: ['dragToZoom', 'rightClickToReset'] } используется, перетаскивание через прямоугольную область увеличивает масштаб этой области. Мы рекомендуем использовать rightClickToReset всякий раз, когда используется dragToZoom . См. explorer.maxZoomIn , explorer.maxZoomOut и explorer.zoomDelta для настройки масштабирования.
  • rightClickToReset : щелчок правой кнопкой мыши по диаграмме возвращает ее к исходному уровню панорамирования и масштабирования.
Тип: массив строк
По умолчанию: ['dragToPan', 'rightClickToReset']
проводник.ось

По умолчанию пользователи могут перемещаться как по горизонтали, так и по вертикали, когда используется опция explorer . Если вы хотите, чтобы пользователи перемещались только по горизонтали, используйте explorer: { axis: 'horizontal' } . Точно так же explorer: { axis: 'vertical' } включает панорамирование только по вертикали.

Тип: строка
По умолчанию: как горизонтальное, так и вертикальное панорамирование
проводник.keepInBounds

По умолчанию пользователи могут панорамировать все вокруг, независимо от того, где находятся данные. Чтобы пользователи не перемещались за пределы исходной диаграммы, используйте explorer: { keepInBounds: true } .

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

Максимальное увеличение, которое может увеличить проводник. По умолчанию пользователи смогут увеличить масштаб настолько, что будут видеть только 25% исходного изображения. Настройка explorer: { maxZoomIn: .5 } позволит пользователям увеличивать масштаб только настолько, чтобы увидеть половину исходного вида.

Тип: номер
По умолчанию: 0,25
проводник.maxZoomOut

Максимум, что может уменьшить проводник. По умолчанию пользователи смогут уменьшить масштаб настолько, что диаграмма будет занимать только 1/4 доступного пространства. Настройка explorer: { maxZoomOut: 8 } позволит пользователям уменьшить масштаб настолько, что диаграмма будет занимать только 1/8 доступного пространства.

Тип: номер
По умолчанию: 4
explorer.zoomDelta

Когда пользователи увеличивают или уменьшают масштаб, explorer.zoomDelta определяет степень увеличения. Чем меньше число, тем плавнее и медленнее масштабирование.

Тип: номер
По умолчанию: 1,5
размер шрифта

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

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

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

Тип: строка
По умолчанию: «Arial».
ForceIFrame

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

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Тип: объект
По умолчанию: ноль
hAxis.baseline

Базовая линия для горизонтальной оси.

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

Цвет базовой линии горизонтальной оси. Может быть любой строкой цвета HTML, например: 'red' или '#00cc00' .

Тип: номер
По умолчанию: «черный»
hAxis.direction

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

Тип: 1 или -1
По умолчанию: 1
hAxis.format

Строка формата для меток числовых осей. Это подмножество набора шаблонов ICU . Например, {format:'#,###%'} будет отображать значения "1000%", "750%" и "50%" для значений 10, 7,5 и 0,5. Вы также можете поставить любое из следующего:

  • {format: 'none'} : отображает числа без форматирования (например, 8000000)
  • {format: 'decimal'} : отображает числа с разделителями тысяч (например, 8 000 000)
  • {format: 'scientific'} : числа отображаются в экспоненциальном представлении (например, 8e6)
  • {format: 'currency'} : отображает числа в местной валюте (например, 8 000 000,00 долларов США).
  • {format: 'percent'} : числа отображаются в процентах (например, 800 000 000%)
  • {format: 'short'} : отображает сокращенные числа (например, 8M)
  • {format: 'long'} : числа отображаются как полные слова (например, 8 миллионов)

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

При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать format:"#" , если вы хотите отображать только целые значения делений, но имейте в виду, что если никакая альтернатива не удовлетворяет этому условию, линии сетки или деления отображаться не будут.

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

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

{color: '#333', minSpacing: 20}
Тип: объект
По умолчанию: ноль
hAxis.gridlines.color

Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML.

Тип: строка
По умолчанию: '#CCC'
hAxis.gridlines.count

Приблизительное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки, или 0 , чтобы не рисовать линии сетки. Укажите -1, значение по умолчанию, чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: номер
По умолчанию: -1
hAxis.gridlines.units

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

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в разделе «Даты и время» .

Тип: объект
По умолчанию: ноль
hAxis.minorGridlines

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

Тип: объект
По умолчанию: ноль
hAxis.minorGridlines.color

Цвет горизонтальных второстепенных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML.

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

Параметр minorGridlines.count в основном устарел, за исключением отключения второстепенных линий сетки путем установки счетчика равным 0. Количество второстепенных линий сетки теперь полностью зависит от интервала между основными линиями сетки (см. hAxis.gridlines.interval ) и минимально необходимого пространства (см. hAxis.minorGridlines.minSpacing ).

Тип: номер
По умолчанию: 1
hAxis.minorGridlines.units

Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами MinorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в разделе «Даты и время» .

Тип: объект
По умолчанию: ноль
hAxis.logScale

hAxis свойство, которое делает горизонтальную ось логарифмической шкалой (требует, чтобы все значения были положительными). Установите значение true для да.

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

hAxis свойство, которое делает горизонтальную ось логарифмической шкалой. Может быть одним из следующих:

  • null — логарифмическое масштабирование не выполняется.
  • 'log' - логарифмическое масштабирование. Отрицательные и нулевые значения не отображаются. Этот параметр аналогичен установке hAxis: { logscale: true } .
  • «mirrorLog» — логарифмическое масштабирование, в котором отображаются отрицательные и нулевые значения. Нанесенное на график значение отрицательного числа является отрицательным значением логарифма абсолютного значения. Значения, близкие к 0, нанесены на линейную шкалу.
Тип: строка
По умолчанию: ноль
hAxis.textPosition

Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out', 'in', 'none'.

Тип: строка
По умолчанию: «вне»
hAxis.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>}
hAxis.ticks

Заменяет автоматически сгенерированные метки оси X указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или временем дня), либо объектом. Если это объект, он должен иметь свойство v для значения отметки и необязательное свойство f , содержащее литеральную строку, которая будет отображаться в качестве метки.

ViewWindow будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете viewWindow.min или viewWindow.max для переопределения.

Примеры:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Тип: Массив элементов
По умолчанию: авто
hAxis.title

hAxis , указывающее заголовок горизонтальной оси.

Тип: строка
По умолчанию: ноль
hAxis.titleTextStyle

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

{ 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>}
hAxis.maxValue

Перемещает максимальное значение горизонтальной оси на указанное значение; это будет вправо в большинстве графиков. Игнорируется, если установлено значение, меньшее, чем максимальное значение x данных. hAxis.viewWindow.max переопределяет это свойство.

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

Перемещает минимальное значение горизонтальной оси на указанное значение; это будет слева на большинстве диаграмм. Игнорируется, если установлено значение, превышающее минимальное значение x данных. hAxis.viewWindow.min переопределяет это свойство.

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

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

  • 'pretty' - Масштабируйте горизонтальные значения так, чтобы максимальное и минимальное значения данных отображались немного внутри левой и правой области диаграммы. ViewWindow расширяется до ближайшей основной линии сетки для чисел или до ближайшей вспомогательной линии сетки для дат и времени.
  • «максимум» — масштабируйте горизонтальные значения так, чтобы максимальное и минимальное значения данных касались левой и правой части области диаграммы. Это приведет к игнорированию файлов haxis.viewWindow.min и haxis.viewWindow.max .
  • 'explicit' — устаревшая опция для указания левого и правого значений шкалы области диаграммы. (Устарело, потому что это избыточно с haxis.viewWindow.min и haxis.viewWindow.max .) Значения данных за пределами этих значений будут обрезаны. Вы должны указать объект hAxis.viewWindow , описывающий максимальное и минимальное значения для отображения.
Тип: строка
По умолчанию: Эквивалентно «красивому», но haxis.viewWindow.min и haxis.viewWindow.max имеют приоритет, если они используются.
hAxis.viewWindow

Указывает диапазон обрезки по горизонтальной оси.

Тип: объект
По умолчанию: ноль
hAxis.viewWindow.max

Максимальное значение горизонтальных данных для визуализации.

Игнорируется, когда hAxis.viewWindowMode имеет значение «красиво» или «развернуто».

Тип: номер
По умолчанию: авто
hAxis.viewWindow.мин

Минимальное значение горизонтальных данных для отображения.

Игнорируется, когда hAxis.viewWindowMode имеет значение «красиво» или «развернуто».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тип: номер
По умолчанию: 0
легенда.позиция

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

  • 'bottom' - Под графиком.
  • 'left' — слева от диаграммы, при условии, что левая ось не имеет связанных с ней рядов. Поэтому, если вы хотите легенду слева, используйте параметр targetAxisIndex: 1 .
  • 'in' — внутри диаграммы, в верхнем левом углу.
  • 'none' - Легенда не отображается.
  • 'right' - Справа от диаграммы. Несовместимо с опцией vAxes .
  • 'top' - Над диаграммой.
Тип: строка
По умолчанию: «право»
легенда.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
ориентация

Ориентация диаграммы. При значении 'vertical' оси диаграммы поворачиваются так, что (например) столбчатая диаграмма становится гистограммой, а диаграмма с областями растет вправо, а не вверх:

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

Форма отдельных элементов данных: «круг», «треугольник», «квадрат», «ромб», «звезда» или «многоугольник». Примеры см. в документации по точкам .

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

Диаметр точек данных в пикселях. Используйте ноль, чтобы скрыть все точки. Вы можете переопределить значения для отдельных серий, используя свойство series . Если вы используете линию тренда , этот параметр также повлияет на pointSize составляющих ее точек, что изменит видимую ширину линии тренда. Чтобы избежать этого, вы можете переопределить его с помощью опции trendlines.n.pointsize .

Тип: номер
По умолчанию: 7
точкиВидимый

Определяет, будут ли отображаться точки. Установите значение false , чтобы скрыть все точки. Вы можете переопределить значения для отдельных серий, используя свойство series . Если вы используете линию тренда , параметр pointsVisible повлияет на видимость точек на всех линиях тренда, если только вы не переопределите его параметром trendlines.n.pointsVisible .

Это также можно переопределить с помощью роли стиля в форме "point {visible: true}" .

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

Когда selectionMode имеет 'multiple' , пользователи могут выбирать несколько точек данных.

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

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

  • color — цвет, используемый для этой серии. Укажите допустимую строку цвета HTML.
  • labelInLegend — описание ряда, отображаемое в легенде диаграммы.
  • lineWidth — переопределяет глобальное значение lineWidth для этой серии.
  • pointShape — переопределяет глобальное значение pointShape для этой серии.
  • pointSize — переопределяет глобальное значение pointSize для этой серии.
  • pointsVisible — переопределяет глобальное значение pointsVisible для этой серии.
  • visibleInLegend — логическое значение, где true означает, что серия должна иметь легенду, а false означает, что ее не должно быть. Значение по умолчанию верно.

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

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

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

  • «максимизированный» — максимизирует область диаграммы и рисует легенду и все метки внутри области диаграммы. Устанавливает следующие параметры: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Тип: строка
По умолчанию: ноль
заглавие

Текст для отображения над диаграммой.

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

Где разместить заголовок диаграммы по сравнению с областью диаграммы. Поддерживаемые значения:

  • in — Нарисуйте заголовок внутри области диаграммы.
  • out — вывести заголовок за пределы области диаграммы.
  • none - пропустить заголовок.
Тип: строка
По умолчанию: «вне»
titleTextStyle

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

{ 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, любое переполнение за пределами границ диаграммы будет обрезано. Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки .

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

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

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

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

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

Тип: логический
По умолчанию: ложь
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>}
всплывающая подсказка.триггер

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

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

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

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

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Тип: объект
По умолчанию: ноль
линии тренда.n.color

Цвет линии тренда , выраженный либо английским названием цвета, либо шестнадцатеричной строкой.

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

Для линий тренда type: 'polynomial' степень полинома ( 2 для квадратичного, 3 для кубического и т. д.). (Степень по умолчанию может измениться с 3 на 2 в следующем выпуске Google Charts.)

Тип: номер
По умолчанию: 3
Trendlines.n.labelInLegend

Если установлено, линия тренда будет отображаться в легенде как эта строка.

Тип: строка
По умолчанию: ноль
Trendlines.n.lineWidth

Ширина линии тренда в пикселях.

Тип: номер
По умолчанию: 2
линии тренда.n.непрозрачность

Прозрачность линии тренда от 0,0 (прозрачная) до 1,0 (непрозрачная).

Тип: номер
По умолчанию: 1,0
Trendlines.n.pointSize

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

Тип: номер
По умолчанию: 1
Trendlines.n.pointsВидимый

Линии тренда строятся путем нанесения на график множества точек. Параметр pointsVisible линии тренда определяет, видны ли точки конкретной линии тренда.

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

Показывать ли коэффициент детерминации в легенде или во всплывающей подсказке линии тренда.

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

Является ли линия тренда 'linear' (по умолчанию), 'exponential' или 'polynomial' .

Тип: строка
По умолчанию: линейный
Trendlines.n.visibleInLegend

Появляется ли уравнение линии тренда в легенде. (Он появится во всплывающей подсказке линии тренда.)

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

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Тип: объект
По умолчанию: ноль
vAxis.baseline

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

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

Указывает цвет базовой линии для вертикальной оси. Может быть любой строкой цвета HTML, например: 'red' или '#00cc00' .

Тип: номер
По умолчанию: «черный»
vAxis.direction

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

Тип: 1 или -1
По умолчанию: 1
vAxis.format

Строка формата для меток числовых осей. Это подмножество набора шаблонов ICU . Например, {format:'#,###%'} будет отображать значения "1000%", "750%" и "50%" для значений 10, 7,5 и 0,5. Вы также можете поставить любое из следующего:

  • {format: 'none'} : отображает числа без форматирования (например, 8000000)
  • {format: 'decimal'} : отображает числа с разделителями тысяч (например, 8 000 000)
  • {format: 'scientific'} : числа отображаются в экспоненциальном представлении (например, 8e6)
  • {format: 'currency'} : отображает числа в местной валюте (например, 8 000 000,00 долларов США).
  • {format: 'percent'} : числа отображаются в процентах (например, 800 000 000%)
  • {format: 'short'} : отображает сокращенные числа (например, 8M)
  • {format: 'long'} : числа отображаются как полные слова (например, 8 миллионов)

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

При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать format:"#" , если вы хотите отображать только целые значения делений, но имейте в виду, что если никакая альтернатива не удовлетворяет этому условию, линии сетки или деления отображаться не будут.

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

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

{color: '#333', minSpacing: 20}
Тип: объект
По умолчанию: ноль
vAxis.gridlines.color

Цвет вертикальных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML.

Тип: строка
По умолчанию: '#CCC'
vAxis.gridlines.count

Приблизительное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для gridlines.count , оно будет использоваться для вычисления minSpacing между линиями сетки. Вы можете указать значение 1 , чтобы нарисовать только одну линию сетки, или 0 , чтобы не рисовать линии сетки. Укажите -1, значение по умолчанию, чтобы автоматически вычислить количество линий сетки на основе других параметров.

Тип: номер
По умолчанию: -1
vAxis.gridlines.units

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

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

Дополнительную информацию можно найти в разделе «Даты и время» .

Тип: объект
По умолчанию: ноль
vAxis.minorGridlines

Объект с членами для настройки второстепенных линий сетки на вертикальной оси, аналогичный параметру vAxis.gridlines.

Тип: объект
По умолчанию: ноль
vAxis.minorGridlines.color

Цвет вертикальных второстепенных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML.

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

Параметр minorGridlines.count в основном устарел, за исключением отключения второстепенных линий сетки путем установки счетчика на 0. Количество второстепенных линий сетки зависит от интервала между основными линиями сетки (см. vAxis.gridlines.interval) и минимально необходимого пространства (см. vAxis. minorGridlines.minSpacing).

Тип: номер
По умолчанию: 1
vAxis.minorGridlines.units

Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами MinorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды.

Общий формат:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Дополнительную информацию можно найти в разделе «Даты и время» .

Тип: объект
По умолчанию: ноль
vAxis.logScale

Если true, вертикальная ось отображается в логарифмическом масштабе. Примечание. Все значения должны быть положительными.

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

vAxis , которое делает вертикальную ось логарифмической шкалой. Может быть одним из следующих:

  • null — логарифмическое масштабирование не выполняется.
  • 'log' - логарифмическое масштабирование. Отрицательные и нулевые значения не отображаются. Этот параметр аналогичен настройке vAxis: { logscale: true } .
  • «mirrorLog» — логарифмическое масштабирование, в котором отображаются отрицательные и нулевые значения. Нанесенное на график значение отрицательного числа является отрицательным значением логарифма абсолютного значения. Значения, близкие к 0, нанесены на линейную шкалу.
Тип: строка
По умолчанию: ноль
vAxis.textPosition

Положение текста по вертикальной оси относительно области диаграммы. Поддерживаемые значения: 'out', 'in', 'none'.

Тип: строка
По умолчанию: «вне»
vAxis.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>}
vAxis.ticks

Заменяет автоматически сгенерированные метки оси Y указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или временем дня), либо объектом. Если это объект, он должен иметь свойство v для значения отметки и необязательное свойство f , содержащее литеральную строку, которая будет отображаться в качестве метки.

ViewWindow будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете viewWindow.min или viewWindow.max для переопределения.

Примеры:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Тип: Массив элементов
По умолчанию: авто
vAxis.title

vAxis , указывающее заголовок вертикальной оси.

Тип: строка
По умолчанию: без названия
vAxis.titleTextStyle

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

{ 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>}
vAxis.maxValue

Перемещает максимальное значение вертикальной оси на указанное значение; это будет вверх в большинстве графиков. Игнорируется, если установлено значение, меньшее, чем максимальное значение y данных. vAxis.viewWindow.max переопределяет это свойство.

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

Перемещает минимальное значение вертикальной оси на указанное значение; это будет вниз в большинстве графиков. Игнорируется, если установлено значение, превышающее минимальное значение y данных. vAxis.viewWindow.min переопределяет это свойство.

Тип: номер
По умолчанию: ноль
vAxis.viewWindowMode

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

  • 'pretty' - Масштабируйте вертикальные значения так, чтобы максимальное и минимальное значения данных отображались немного внутри нижней и верхней части области диаграммы. ViewWindow расширяется до ближайшей основной линии сетки для чисел или до ближайшей вспомогательной линии сетки для дат и времени.
  • 'maximized' — Масштабируйте вертикальные значения так, чтобы максимальные и минимальные значения данных касались верхней и нижней части области диаграммы. Это приведет к игнорированию vaxis.viewWindow.min и vaxis.viewWindow.max .
  • 'explicit' — устаревшая опция для указания верхнего и нижнего значений шкалы области диаграммы. (Устарело, потому что это избыточно с vaxis.viewWindow.min и vaxis.viewWindow.max . Значения данных вне этих значений будут обрезаны. Вы должны указать объект vAxis.viewWindow , описывающий максимальное и минимальное значения для отображения.
Тип: строка
По умолчанию: Эквивалентно «красивому», но vaxis.viewWindow.min и vaxis.viewWindow.max имеют приоритет, если они используются.
vAxis.viewWindow

Указывает диапазон обрезки по вертикальной оси.

Тип: объект
По умолчанию: ноль
vAxis.viewWindow.max

Максимальное значение данных по вертикали для отображения.

Игнорируется, когда vAxis.viewWindowMode имеет значение «красиво» или «развернуто».

Тип: номер
По умолчанию: авто
vAxis.viewWindow.мин

Минимальное значение данных по вертикали для отображения.

Игнорируется, когда vAxis.viewWindowMode имеет значение «красиво» или «развернуто».

Тип: номер
По умолчанию: авто
ширина

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

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

Методы

Метод
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()

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

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

События

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

Имя
animationfinish

Запускается, когда анимация перехода завершена.

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

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

Свойства: targetID
error

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

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

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

Свойства: currentPageIndex, totalPages
onmouseover

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

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

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

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

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

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

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

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

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

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