Данный урок будет интересен всем, кто хочет научиться создавать разные красивые чарты, диаграммы и прочее для отображения на сайте.
В этом нам может всемогущий Гугл, который предлагает свое API для создания классных и разных чартов.
Первым делом нам необходимо поместить следующий код в шапке документа:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Tutorials Pesentage');
data.addRows(5);
data.setValue(0, 0, 'HTML');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'CSS');
data.setValue(1, 1, 39);
data.setValue(2, 0, 'Разное');
data.setValue(2, 1, 36);
data.setValue(3, 0, 'Для сайта');
data.setValue(3, 1, 22);
data.setValue(4, 0, 'jQuery');
data.setValue(4, 1, 85);
data.setValue(3, 0, 'Mootools');
data.setValue(3, 1, 14);
data.setValue(3, 0, 'PHP');
data.setValue(3, 1, 14);
var chart = new google.visualization.ImagePieChart(document.getElementById('9lessonschart'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Уроки на Ruseller.com'});
var chart = new google.visualization.PieChart(document.getElementById('2'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Уроки на Ruseller.com'});
var chart = new google.visualization.BarChart(document.getElementById('3'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Уроки на Ruseller.com'});
var chart = new google.visualization.ImageBarChart(document.getElementById('4'));
chart.draw(data, {width: 400, height: 240, min: 0});
var chart = new google.visualization.LineChart(document.getElementById('5'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Уроки на Ruseller.com'});
}
</script>
Теперь давайте разберем все по порядку:
1) Мы обращаемся к гуглу за скриптом визуализации. Можно его скачать к себе на сервер, но это не обязательно. Ссылаясь на Гугл Вы экономите свои ресурсы.
2) Далее описываются все возможные виды чартов и диаграмм ('piechart', 'imagepiechart', 'barchart','imageBarChart','linechart'), которые можно использовать.
3) Жирным выделен код, который задает исходные данные. Как Вы видите в нашем примере мы использовали категории HTML, CSS, Разное, Для сайта, jQuery, Mootools, PHP и каждая из них имеет порядковый номер от 0 до 4. В скобках под названием категории последняя цифра это значение (в нашем примере - это кол-во уроков в разделе), которое должно отображаться на графике.
4) Курсивом выделено код, в котором указываются настройки каждого чарта в отдельности. Здесь можно задать и ширину, и высоту, и название, и расположение легенды, и тип чарта. Типы бывают: 'piechart', 'imagepiechart', 'barchart','imageBarChart','linechart'.
5) Важно в коде document.getElementById('5') в скобках указан идентификатор чарта, при выводе чарта далее он нам понадобится.
Теперь достаточно в нужном месте настроить показ чартов:
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>
<div id='5'></div>
Вот так вот просто эти чарты отображать. Просто достаточно указать необходимое id.
Спасибо за внимание! Всего хорошего!