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

Перейти к основному контенту

• Главная

• Путеводители

• Ссылка

• Поддерживать

• Обзор

• Привет, Чарты!

  • Краткое руководство
  • Загрузите библиотеку графиков
  • Подготовьте данные
  • Настроить диаграмму
  • Нарисуйте диаграмму
  • Нарисуйте несколько диаграмм

• Типы диаграмм

  • Галерея диаграмм
  • Диаграммы аннотаций
  • Диаграммы областей
  • Гистограммы
  • Пузырьковые диаграммы
  • Календарь Диаграммы
  • Свечные графики
  • Столбчатые диаграммы
  • Комбинированные диаграммы
  • Диаграммы различий
  • Диаграммы пончиков
  • Диаграммы Ганта
  • Калибровочные диаграммы
  • GeoCharts
  • Гистограммы
  • Интервалы
  • Линейные графики
  • Карты
  • Организационные диаграммы
  • Круговые диаграммы
  • Диаграммы Санки
  • Точечные диаграммы
  • Диаграммы ступенчатых областей
  • Таблица Диаграммы
  • Хронология
  • Диаграммы карты дерева
  • Линии тренда
  • VegaChart
  • Диаграммы водопада
  • Деревья слов
  • Разные примеры

• Как рисовать диаграммы

  • Введение
  • диаграмма.draw()
  • ChartWrapper
  • Добавить интерактивность
  • Как использовать электронные таблицы с диаграммами
  • Как печатать PNG

• Расширенное использование

  • Как настроить диаграммы
  • Параметры оси
  • Как создать новый тип диаграммы
  • Перекрестие
  • Форматтеры
  • Линии
  • Наложения
  • Точки
  • Подсказки
  • Инструменты разработки

• Взаимодействие с диаграммами

  • Мероприятия
  • Анимация
  • Элементы управления и информационные панели
  • Панели инструментов
  • Редактор диаграмм

• Данные диаграммы

  • Таблицы данных и представления данных
  • Роли данных
  • Даты и время
  • Как подключить вашу базу данных
  • Получение данных диаграммы из других источников
  • Получение данных из Google Таблиц
  • Как реализовать новый тип источника данных

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

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

Обзор

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

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

Пример

Создание диаграмм рассеяния материалов

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

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

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

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

  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));
  }

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

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

chart.draw(data, options);

...с этим:

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

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

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

Обратите внимание, что наши две оси 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 :

  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.

Столбцы:

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

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

Методы

События

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

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

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

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2024-07-10 UTC.