Летом мне было поручено создать интерактивную панель управления с использованием данных из Google Таблиц, которую могли бы поддерживать и обновлять люди, не знакомые с HTML. Хотя это была непростая задача, в конце концов я нашел способ создать информационную панель с использованием HTML и Javascript, которую можно было бы обновлять напрямую, изменяя данные в Google Sheet. В этом уроке я покажу, как это сделать самостоятельно.
Шаг 1. Создайте лист Google для хранения данных, вот тот, который я буду использовать в этом руководстве. Эти данные взяты с сайта NOAA, который показывает годовую изменчивость температуры в Сан-Франциско.
Https://docs.google.com/spreadsheets/d/1YFu3mEJzUXsxWVFDTVK9RhZF91VlwzDB-3F4WzHITq4/edit#gid=0
Шаг 2. Убедитесь, что для доступа к Google Таблице установлено значение доступен для просмотра всем, имеющим ссылку.
Шаг 3. Создайте HTML-файл со следующим исходным кодом:
Ключевые части кода:
а. Включая библиотеки Javascript Chart.js и Google Charts. Я использую библиотеку Google Charts, чтобы получить доступ к языку запросов визуализации, который позволяет мне выбирать данные.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script>
б. Запросите данные в таблице Google с помощью языка запросов визуализации Google.
function initChart() { URL = "https://docs.google.com/spreadsheets/d/1YFu3mEJzUXsxWVFDTVK9RhZF91VlwzDB-3F4WzHITq4/edit#gid=0"; var query = new google.visualization.Query(URL); query.setQuery('select *'); query.send(function(response) { handleQueryResponse(response); }); }
c. В ответ я прочитал данные как объект JSON, поскольку обнаружил, что это дает мне максимальную гибкость для анализа данных по мере необходимости.
var data = response.getDataTable(); . . . dataj = JSON.parse(data.toJSON()); . . . for (i = 0; i < dataj.rows.length; i++) { const series_data = []; for (j = 1; j < dataj.rows[i].c.length; j++) { if (dataj.rows[i].c[j] != null) { if (dataj.rows[i].c[j].v != null) { series_data.push(dataj.rows[i].c[j].v); } else { series_data.push(0); } } } . . . datasets.push(dataset);
d. Настройте объект Chart.js «Chart» с нужными наборами данных и метками.
const chartdata = { labels: labels, datasets: datasets }; var canvas = document.getElementById("myChart"); var setup = { type: 'line', data: chartdata, options: { plugins: { title: { display: true, text: dataj.cols[0].label } }, responsive: true, } } chart = new Chart(canvas, setup);
Шаг 4. Чтобы просмотреть HTML-файл, вам необходимо получить к нему доступ с веб-сервера. Если вы знакомы с Python и хотите создать локальный веб-сервер, чтобы попробовать это, вы можете ввести следующую команду в оболочке:
python -m http.server
Шаг 5. В браузере введите расположение URL-адреса файла, и вы должны увидеть следующее: