На этой странице перечислены различные способы создания экземпляров и рисования диаграмм на странице. Каждый метод имеет преимущества и недостатки, перечисленные ниже.
Содержание
диаграмма.draw()
Это основной метод, описанный в Hello Chart! пример в этой документации. Вот основные шаги:
- Загрузите загрузчик библиотеки gstatic, библиотеки Google Visualization и библиотеки диаграмм.
- Подготовьте свои данные
- Подготовьте любые варианты диаграмм
- Создайте экземпляр класса диаграммы, передав дескриптор элемента контейнера страницы.
- При желании зарегистрируйтесь, чтобы получать любые события графика. Если вы собираетесь вызывать методы на графике, вам следует прослушивать событие «готово».
-
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 — это удобный класс, который обрабатывает загрузку всех соответствующих библиотек диаграмм, а также упрощает отправку запросов к источникам данных инструментов диаграмм.
Преимущества:
- Гораздо меньше кода
- Загружает все необходимые библиотеки диаграмм.
- Значительно упрощает запросы к источникам данных за счет создания объекта
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>
В сочетании с autoloading это может привести к очень компактному коду:
<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>