На этой странице перечислены различные способы создания и рисования диаграммы на странице. Каждый метод имеет преимущества и недостатки, перечисленные ниже.
Содержание
диаграмма.draw()
Это основной метод, описанный в Hello Chart! пример в этой документации. Вот основные шаги:
- Загрузите загрузчик библиотеки gstatic, визуализацию Google и библиотеки диаграмм.
- Подготовьте свои данные
- Подготовьте любые варианты графиков
- Создайте экземпляр класса диаграммы, передав дескриптор элементу контейнера страницы.
- При желании зарегистрируйтесь, чтобы получать любые события графика. Если вы собираетесь вызывать методы на диаграмме, вы должны прослушивать событие «готово».
- Вызовите
chart.draw()
, передав данные и параметры.
Преимущества:
- Вы имеете полный контроль над каждым этапом процесса.
- Вы можете зарегистрироваться, чтобы слушать все события, возникающие на графике.
Недостатки:
- Подробный
- Вы должны явно загрузить все необходимые библиотеки диаграмм.
- Если вы отправляете запросы, вы должны вручную реализовать обратный вызов, проверить его успешность, извлечь возвращенный
DataTable
и передать его на диаграмму.
Пример:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> var data; var chart; // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create our data table. data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. chart = new google.visualization.PieChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); } function selectHandler() { var selectedItem = chart.getSelection()[0]; var value = data.getValue(selectedItem.row, 0); alert('The user selected ' + value); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
ChartWrapper
ChartWrapper
— это удобный класс, который обрабатывает для вас загрузку всех соответствующих библиотек диаграмм, а также упрощает отправку запросов в источники данных инструментов диаграмм.
Преимущества:
- Гораздо меньше кода
- Загружает все необходимые библиотеки диаграмм для вас
- Делает запросы к источникам данных намного проще, создавая объект
Query
и обрабатывая обратный вызов для вас. - Передайте идентификатор элемента контейнера, и он вызовет для вас getElementByID.
- Данные могут быть представлены в различных форматах: в виде массива значений, в виде литеральной строки JSON или в виде дескриптора
DataTable
.
Недостатки:
- В настоящее время
ChartWrapper
распространяет только события выбора, готовности и ошибки. Чтобы получить другие события, вы должны получить дескриптор обернутой диаграммы и подписаться на события в ней. Примеры см. в документацииChartWrapper
.
Примеры:
Вот пример гистограммы с локально сконструированными данными, указанными в виде массива. Вы не можете указать метки диаграммы или значения даты и времени, используя синтаксис массива, но вы можете вручную создать объект DataTable
с этими значениями и передать его свойству dataTable
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], ['', 700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw(); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
Вот пример линейной диаграммы, которая получает данные, запрашивая электронную таблицу Google. Обратите внимание, что коду не нужно обрабатывать обратный вызов.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() // No query callback handler needed! } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
В сочетании с автозагрузкой это может сделать код очень компактным:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrapper = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', query: 'SELECT A,D WHERE D > 100 ORDER BY D', options: {'title': 'Countries'}, containerId: 'vis_div' }); wrapper.draw() } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="vis_div" style="width: 600px; height: 400px;"></div> </body> </html>
Использование редактора диаграмм с ChartWrapper
Вы можете использовать диалоговое окно редактора диаграмм, встроенное в электронные таблицы Google, для создания диаграммы, а затем запросить сериализованную строку ChartWrapper
, представляющую диаграмму. Затем вы можете скопировать и вставить эту строку и использовать ее, как описано выше в ChartWrapper
.
Вы можете встроить редактор диаграмм на свою собственную страницу и предоставить пользователям методы для подключения к другим источникам данных и возврата строки ChartWrapper
. Дополнительные сведения см. в справочной документации ChartEditor
.
РисоватьДиаграмму()
DrawChart
— это глобальный статический метод, обертывающий ChartWrapper
.
Преимущества:
- То же, что и
ChartWrapper
, но немного короче.
Недостатки:
- Не возвращает дескриптор оболочки, поэтому вы не можете обрабатывать какие-либо события.
<DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current'); // Don't need to specify chart libraries! google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization_div" style="width: 600px; height: 400px;"></div> </body> </html>