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

Центрирование заголовка PieChart в Google Charts
Для генерации чартов я иногда пользуюсь сервисом Google Charts. Все получается довольно красиво, легко настраивается, результат в основном устраивает. Если бы не одно НО. Заголовок круговой диаграммы всегда прижат к левому краю и никакими настройками это поведение не изменить. Эффективное решение нашлось и на эту проблему.
Вынести заголовок за пределы чарта - не вариант, так как чарт трансформируется в изображение. HTML-символы типа " " никак не обрабатываются и выводятся в неизменном виде. Начальные пробелы отсекаются. Пришлось искать символ, который не отображается, но при этом не является пробелом. Такой символ нашелся, это юникодный "\uFFFC". Если его использовать в качестве первого символа заголовка, то следующие после него пробелы обрабатываются как значащие символы и не удаляются. За счет этого основной текст заголовка можно подвинуть на нужное расстояние. Код для генерации чарта в этом случае будет примерно такой:
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
- </script>
- <script type="text/javascript">
- google.charts.load('current', {'packages':['corechart']});
- google.charts.setOnLoadCallback(drawChart);
- function drawChart() {
- var data = google.visualization.arrayToDataTable([
- ['1', '2'],
- ['Синие', 100],
- ['Красные', 500]
- ]);
- var options = {
- pieSliceText: 'value',
- fontSize: 20,
- width: 500,
- height: 600,
- backgroundColor: '#F0F0F0',
- chartArea: {left:20, right:20, top:30, width:'100%', height:'90%'},
- legend: { position:'bottom', maxLines:1 },
- // Заголовок чарта с ограничителем и отступом пробелами
- title: '\uFFFC Чарт здорового человека'
- };
- var chart=new google.visualization.PieChart(
- document.getElementById('piechart')
- );
- google.visualization.events.addListener(chart, 'ready',
- function () {
- document.getElementById('piechart').innerHTML=
- '<img src="'+chart.getImageURI()+'">';
- }
- );
- chart.draw(data, options);
- }
- </script>
- <div id="piechart"></div>
Просмотров: 379 | Комментариев: 0
Метки: JavaScript, графика

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

Добавить комментарий
Заполните форму для добавления комментария
