«
»
GoogleGoogle DocsWordPress

Использование Google Charts в посте WordPress

Использование Google Charts в посте WordPress

Каждому аналитику, менеджеру и генеральному директору нравятся потрясающие графики. На хороший график приятно смотреть, его легко понять, и его создание не должно быть ракетостроением.

Существуют сотни отличных инструментов и фреймворков, которые позволяют создавать красивые графики. Испытав десятки из них, я, наконец, выбрал Google Charts в качестве инструмента.

Начинающим

Для самых простых пользователей, я предлагаю изучить некоторые из плагинов WP. Просто в Google «Плагины диаграмм в WordPress». Они сделают эту работу, но Google Charts имеет гораздо больше возможностей для немного больших усилий и задач.

Вот почему

Существуют инструменты для создания диаграмм, которые превосходят Google Charts по некоторым конкретным критериям, но объединяя их все, GC – явный победитель.

  • Они хорошо выглядят и знакомы (Google, вы знаете)
  • Они хорошо работают с данными, связанными с Google (Google Analytics, Docs, AdWords …)
  • Хорошая документация и начать легко
  • Прекрасные варианты для настройки
  • Это бесплатно!

Использование Google Charts в посте WordPress

Google Charts гибки, вы можете разместить их повсюду (в Интернете), и одним из мест, где вы хотели бы их использовать, может быть ваш блог. И если ваш блог работает на WordPress, вот что вам нужно знать.

Практически то же самое относится ко всем сайтам.

Шаг 1 – Загрузите скрипт

Есть несколько способов загрузки скриптов в WordPress, я расскажу о двух наиболее распространенных.

Я рекомендую добавить скрипт для Google Charts в <head>отличие от <body>или <footer>.

Вариант 1. Поместите это прямо в <head>тег в ваших файлах темы WordPress. Обычно header.php

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Вариант 2. Загрузить скрипт используяwp_enqueue_script

wp_enqueue_script( 'google-charts', get_template_directory_uri() . '/js/google-charts.js', array(), '20151215', false );

Шаг 2 – Посмотрите на галерею диаграмм

У них есть отличная галерея, показывающая, что можно сделать с помощью Google Charts, включая исходный код и даже ссылку на JS Fiddle, чтобы вы могли поиграть самостоятельно.

Вот ссылка.

Вот и все, выберите понравившуюся диаграмму и поместите код в пост WordPress (текстовый режим).

Примеры Google Charts в посте WordPress

Образец 1 – Линейная Диаграмма

Код:

<div id="chart_div"></div> <script> google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Users'); data.addRows([ [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70], [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68], [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], [66, 70], [67, 72], [68, 75], [69, 80] ]); var options = { hAxis: { title: 'Time' }, vAxis: { title: 'Count' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script>

Образец 2 – круговая диаграмма

задача Часов в день
Работа 11
Есть 2
Ездить 2
Смотри телевизор 2
Спать 7

Код:

<div id="piechart"></div> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script>

Образец 3 – комбинированная диаграмма

Monthly Coffee Production by CountryBoliviaEcuadorMadagascarPapua NewGuineaRwandaAverage2005/062006/072007/082008/0902004006008001,0001,2001,400MonthCups

Месяц Боливия Эквадор Мадагаскар Папуа – Новая Гвинея Руанда Средний
2005/06 135 +1120 599 1268 288 682
2006/07 157 1167 587 807 397 623
2007/08 139 +1110 615 +968 215 609,4
2008/09 136 +691 629 1026 366 569,6

Код:

<div id="combo_chart" style="width: 700px; height: 500px;"></div> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['2005/06', 135, 1120, 599, 1268, 288, 682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215, 609.4], ['2008/09', 136, 691, 629, 1026, 366, 569.6] ]); var options = { title : 'Monthly Coffee Production by Country', vAxis: {title: 'Cups'}, hAxis: {title: 'Month'}, seriesType: 'bars', series: {5: {type: 'line'}} }; var chart = new google.visualization.ComboChart(document.getElementById('combo_chart')); chart.draw(data, options); } </script>

Почему бы просто не использовать изображения диаграмм?

Конечно, вы также можете использовать некоторые инструменты, которые позволят вам создавать диаграммы в виде файлов изображений, которые вы можете позже загрузить в WordPress. Позвольте мне сказать вам, почему вы должны не делать этого.

  • Это дополнительный шаг. Вам все равно придется вставить туда все данные, как в Google Charts.
  • Это очень легко обновить данные прямо в вашем посте.
  • Это интерактивно, просто наведите курсор мыши на примеры выше.

Просто попробуйте, и вы увидите разницу!

Разве размещение кода в посте не плохая идея?

Если вы интенсивный пользователь этих графиков, я бы порекомендовал создать плагин или хотя бы шорткод для них. Но если вы время от времени используете только несколько диаграмм в своих сообщениях, нет ничего плохого в том, чтобы вставлять их в виде простого кода прямо в ваше сообщение.

Если у вас есть какие-либо вопросы о настройке, просто задайте их в комментариях ниже, и мы ответим на них!

Вывод

Если вы ищете простую в использовании библиотеку диаграмм, на которую также приятно смотреть и которая имеет массу настроек, я бы порекомендовал попробовать Google Charts. Помимо всего прочего, у него также есть супер хорошая библиотека и хорошее сообщество, использующее ее.

В случае, если вы ищете действительно масштабируемое решение для построения графиков с практически неограниченными возможностями настройки, смотрите в D3.js.

Начните с Google Charts

Пожалуйста, дайте знать в комментариях, какую библиотеку диаграмм вы используете и каковы ее преимущества. 

Источник записи: https://reflectivedata.com

Связанные записи
PageSpeed InsightsWordPressПанели управления

Как повысить производительность WordPress - советы от Plesk

LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

WordPress

WordPress 5.5 - 20 новых функций и много улучшений. Что нового в WP.

WordPressПлагины

Плагин Pinterest Automatic Pin Wordpress от ValvePress (авто постинг в Pinterest на автомате)