Работа с графиками и диаграммами google chart
У гугла есть сотни крутых сервисов, начиная от почты gmail и заканчивая уведомлениями google alert. Но самое прикольное, что есть гугловские сервисы, которые упрощают жизнь разработчикам, например, google font для нестандартных шрифтов на сайте или google chart для построения графиков.
Вот о последнем я и хочу поговорить. Если кто пытался постичь этот неимоверный сервис, то видел какого объема документация для разработчиков. Естественно, при выполнении прикладных задач, никто всю документацию читать не будет, я тоже не стал заниматься фигней, и полез сразу в примеры. Чтобы вывести 2 таких графика, я потратил очень много времени.
Поэтому хочу помочь таким же бедолагам и сэкономить их время. А заодно будет и мне небольшая шпаргалка.
Построение круговой диаграммы
Начнем с круговой диаграммы, я посчитал, что эта задача сложнее и поэтому начал с нее. Вариант из примеров выглядит так:
See the Pen vgWwWW by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.
От него и будем плясать. Что меня не устроило? Во-первых, цвета, не то чтобы они мне не понравились, но в макете были другие. Поэтому начнем с изменения цветов сегмента. Благо поиск по странице документации слова «color» быстро меня навел на нужный кусок. В опции надо запихать необходимые параметры:
var options = {
title: 'Название',
pieHole: 0.6,
slices: {
0: { color: '#56b900' },
1: { color: '#cccccc' }
}
};
Шестнадцатиричное значение цвета или можно написать то, что понимает css: ‘yellow’, ‘red’ и т.д. Количество предустановленных цветов не обязательно должно равняться количеству реально заданных сегментов, но лучше установить количество цветов с запасом, т.к. если ваших цветов не будет хватать, то диаграмма возьмет их из значений по умолчанию, что может сильно поломать ваш дизайн. Сразу изменим толщину рамки у диаграммы, за это отвечает параметр pieHole (размер дырки от бублика =) ), значения от нуля до единицы, где ноль это сплошные сегменты, а при n→1 рамка становится тоньше.
Еще мне нужно, чтобы размер самой диаграммы был максимальным на холсте, а вот легенда мне вообще не нужна, и фон тоже надо бы убрать. Опять же это меняется через объект опций:
var options = {
title: '',
pieHole: 0.6,
slices: {
0: { color: '#56b900' },
1: { color: '#cccccc' }
},
backgroundColor: 'transparent',
legend : 'none',
chartArea : {left: 10, top: 10, width: '95%', height: '95%'}
};
Значения говорят сами за себя. С chartArea есть особенность, если точку начала установить в нуле, а размеры сделать по 100%, то будет небольшой баг, при наведении на сегмент он подсвечивается, и вот эта подсветка обрежется границами обертки, поэтому я отступил от края. Теперь завернем все это в более осмысленную функцию (мне хочется верить, что она более осмысленная) и посмотрим что получается.
See the Pen oBoRGZ by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.
Продублирую функцию отдельно (вдруг онлайн интерпретатор удалит мое творение?), чтобы дать комментарии
function drawChartRound( arr_data, id ) {
var data = google.visualization.arrayToDataTable(arr_data);
var options = {
title: '',
pieHole: 0.6,
slices: {
0: { color: '#56b900' },
1: { color: '#cccccc' }
},
legend : 'none',
backgroundColor: 'transparent',
chartArea : {left: 10, top: 10, width: '95%', height: '95%'}
};
var chart = new google.visualization.PieChart(document.getElementById(id));
chart.draw(data, options);
}
// Пример вызова
google.charts.load("current", {packages:["corechart"]});
var data = [['Actives', ''], ['var 1', 4], ['var 2', 6]];
drawChartRound( data, 'id_block' );
Принимает 2 параметра: массив с данными (первым элементом в массиве должно идти описание графика) и id блока куда встраивать диаграмму. Таким образом не обязательно отрисовывать график в момент готовности АПИ, можно вызвать в любой другой удобный момент, например, кода пользователь введет данные, которые нужно визуализировать. Мне кажется, это хорошо.
Построение гистограммы
Несмотря на то, что я считал эту задачу простой, но поковыряться пришлось с ней больше, чем с круговой диаграмой. Конечно, проблема, в примерах, они были сильно перегружены.
Сразу дам итоговый вариант, и опишу что здесь за что отвечает
See the Pen dNZBJg by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.
И сама функция выглядит так
function drawHistogramChart( info, id ) {
var data = google.visualization.arrayToDataTable(info);
var view = new google.visualization.DataView(data),
max = 0;
for(itm in info ) {
if( max < info[itm][1] ) {
max = info[itm][1];
}
}
var options = {
title : "",
chartArea : {left: 0, top: 0, width: '100%', height: '100%'},
backgroundColor: 'transparent',
bar : {groupWidth: "95%"},
width : 280,
vAxis : {
minValue: 0,
maxValue: max
}
};
var chart = new google.visualization.ColumnChart(document.getElementById(id));
chart.draw(view, options);
}
// вызывается так
google.charts.load("current", {packages:["corechart"]});
var data = [
["", "", {role: "style"}],
["Описание 1", 10, "#cccccc"],
["Описание 2", 8, "#56b900"]
];
drawHistogramChart(data, 'capital');
По умолчанию включено слишком много всего. Что хочется отметить, если в круговой диаграмме настройки цвета секторов шли отдельной настройкой, то тут цвета передаются в массиве с данными.
Параметр chartArea в действительности очень сильно влияет на отображение. Если точку начала рисования отодвинуть от края, то появится градация шкал. Если высоту задать меньше 100%, то снизу появятся подписи к колонкам, если ширину установить меньше 100%, то справа появится кнопка выделения группы. Или что-то типа такого, по примерам из документации можно понять, что происходит.
Параметр bar — устанавливает ширину колонок.
vAxis — устанавливает максимально и минимальное значение шкалы, может быть важно, если необходимо, чтобы была видна нулевая точка. Так как я старался сделать функцию универсальной, то максимальное значение вычисляется, а не устанавливается жестко.
Итого
Однозначно Google Chart очень мощный сервис от корпорации добра. Если внимательно изучить примеры, то видно, что я использую крайне малую долю возможностей, там еще есть анимации для диаграмм, можно было заморочиться. Хочется верить что гугл не прикроет его, а иначе все наши красивости превратятся в тыкву. В этом и основной минус, я сам себя подписал на зависимость от третьих лиц. Когда только анализировал «рынок решений» для своей задачи, то посматривал в сторону d3.js, но мне он показался еще более мудреным. Когда-нибудь доберусь и до него, но как говорится в одном оскароносном фильме: «Не сейчас. Не сейчас…»
Всем рок!
