Закастомайзить Google Charts

[coder89]

Всем доброго времени суток. Есть у гугла такая приблуда как Charts. Позволяет строить диаграмы разного вида.

Собственно проблема. Есть бублико-chart Для просмотра ссылки Войди или Зарегистрируйся. Будем на примере того что на странице гугла. Там отображены данные в процентах того что мы делаем за день.

Нужно сделать отображение действия и количества часов при наведении на часть чарта. Так как это сделано в тултипе при наведении но без процентов. И показать это нужно не в тултипе, а в центре круга.

Например на той же странице если наведем курсор на синюю область чарта то выползет тултип "Work 11 (45..8%)". А нужно отобразить "Work 11" и не в тултипе а в центре круга.

Надеюсь понятно объяснил. Кто сталкивался с таким кастомом? Как решали?

 

[warg]

"Work 11 (45..8%)". А нужно отобразить "Work 11"

это делается через опции виджета
tooltip.text: 'value'
внизу документа в секции "Configuration Options" полный список опций и их значений.

и не в тултипе а в центре круга

а вот это уже посложнее, прийдется мутить со стилями / разметкой
примеры на эту тему можно посмотреть тут
Для просмотра ссылки Войди или Зарегистрируйся

 

[coder89]

а вот это уже посложнее, прийдется мутить со стилями / разметкой
примеры на эту тему можно посмотреть тут
Для просмотра ссылки Войди или Зарегистрируйся

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

Если кому-то надо вот CSS-код который получился. Каждый тултип пришлось ручками позиционировать.

div.mychart div:last-child {
    position: absolute;
    z-index: 100;
    background: none;
    border:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
}

div.mychart div:last-child .mychart-tooltip {
    position: relative;
    width:130px;
    height:50px;
    font-weight:bold;
    font-size:14px;
    color:#000000;
    font-family: "Arial";
    z-index: 101;
    text-align: center;
    background: #e3e5e5;
}
div.mychart div:last-child .mychart-tooltip.c1 {
    top:-190px;
    left: 20px;
}
div.mychart div:last-child .mychart-tooltip.c2 {
    top:-171px;
    left: -18px;
}
div.mychart div:last-child .mychart-tooltip.c3 {
    top:-302px;
    left:30px;
}