Blog. Just Blog

Центрирование заголовка PieChart в Google Charts

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Центрирование заголовка PieChart в Google Charts
Центрирование заголовка PieChart в Google Charts

Для генерации чартов я иногда пользуюсь сервисом Google Charts. Все получается довольно красиво, легко настраивается, результат в основном устраивает. Если бы не одно НО. Заголовок круговой диаграммы всегда прижат к левому краю и никакими настройками это поведение не изменить. Эффективное решение нашлось и на эту проблему.

Вынести заголовок за пределы чарта - не вариант, так как чарт трансформируется в изображение. HTML-символы типа " " никак не обрабатываются и выводятся в неизменном виде. Начальные пробелы отсекаются. Пришлось искать символ, который не отображается, но при этом не является пробелом. Такой символ нашелся, это юникодный "\uFFFC". Если его использовать в качестве первого символа заголовка, то следующие после него пробелы обрабатываются как значащие символы и не удаляются. За счет этого основной текст заголовка можно подвинуть на нужное расстояние. Код для генерации чарта в этом случае будет примерно такой:
  1. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
  2. </script>
  3.  
  4. <script type="text/javascript">
  5. google.charts.load('current', {'packages':['corechart']});
  6. google.charts.setOnLoadCallback(drawChart);
  7.  
  8. function drawChart() {
  9.   var data google.visualization.arrayToDataTable([
  10.     ['1''2'],
  11.     ['Синие'100],
  12.     ['Красные'500]
  13.   ]);
  14.  
  15.   var options = {
  16.     pieSliceText'value',
  17.     fontSize20,
  18.     width500,
  19.     height600,
  20.     backgroundColor'#F0F0F0',
  21.     chartArea: {left:20right:20top:30width:'100%'height:'90%'},
  22.     legend: { position:'bottom'maxLines:},
  23.     // Заголовок чарта с ограничителем и отступом пробелами
  24.     title'\uFFFC                 Чарт здорового человека'
  25.   };
  26.  
  27.   var chart=new google.visualization.PieChart(
  28.     document.getElementById('piechart')
  29.   );
  30.  
  31.   google.visualization.events.addListener(chart'ready',
  32.     function () {
  33.       document.getElementById('piechart').innerHTML=
  34.         '<img src="'+chart.getImageURI()+'">';
  35.     }
  36.   );
  37.  
  38.   chart.draw(dataoptions);
  39. }
  40. </script>
  41.  
  42. <div id="piechart"></div>
Количество пробелов в отступе регулируется под каждый конкретный случай. На него влияет длина текста заголовка, размер и стиль шрифта, а также общая ширина изображения чарта.

Поделиться ссылкой ВКонтакте
Просмотров: 189 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0025 сек.) / Память: 4.5 Mb
Наверх