Вот шаблон с которым я работаю:
keysoft.keydesign-themes.... Я хочу вставить в него график google visualization chart, используя DOM manipulation (insertAdjacentHTML).
Вот код Google's timeline
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
<script type="text/javascript" src="
www.gstatic.com/charts/lo... <div id="timeline" style="height: 180px;"></div>
Я пробовал вставить код через консоль Хрома следующим кодом:
document.getElementsByClassName('container')[5].getElem entsByClassName('row')[0].insertAdjacentHTML('afte rend', `<script type="text/javascript" src="
www.gstatic.com/charts/lo... <div id="timeline" style="height: 180px;"></div>
<script> google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}</script>`);
Мне посоветавали использовать (`) вместо single quote. А также закрывать тег скрипта так </script>,
При использовании этого кода в Google Tag Manager вышла ошибка "this language feature is only supported for ECMASCRIPT6 mode or better: use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT or higher to enable ES6 features."
Я воспользовался
es6console.com чтобы переписать код под es5 и теперь Google Tag Manager (он принимает только es5) выдает ошибку при сохранении данного кода:
1. Error at line 16, character 113: Parse error. Unterminated string literal
2. Error at line 16, character 297: Parse error. Invalid escape sequence
Переписанный через es6console.com es5 код:
'use strict';
document.getElementsByClassName('container')[5].getElem entsByClassName('row')[0].insertAdjacentHTML('afte rend', '<script type="text/javascript" src="
www.gstatic.com/charts/lo... <div id="timeline" style="height: 180px;"></div>nn <script> google.charts.load('current', {'packages':['timeline']});n google.charts.setOnLoadCallback(drawChart);n function drawChart() {n var container = document.getElementById('timeline');n var chart = new google.visualization.Timeline(container);n var dataTable = new google.visualization.DataTable();nn dataTable.addColumn({ type: 'string', id: 'President' });n dataTable.addColumn({ type: 'date', id: 'Start' });n dataTable.addColumn({ type: 'date', id: 'End' });n dataTable.addRows([n [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],n [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],n [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);nn chart.draw(dataTable);n }</script>');
Нужна помощь в переисывании кода так, чтобы он не вызывал ошибок в Google Tag Manager, а также чтобы запускался встроенный скрипт при манипуляции с DOM.
Для отсева ботов, просьба в начале написать цифру -1-.
Прошу указать цену. Сроки сегодня, завтра.