2014-11-19 3 views
1

Я видел сайт, встроенный интерактивную диаграмму тренда Google на странице: http://knowyourmeme.com/memes/danboКак вставить диаграмму трендов google в html?

Когда я проверил элемент, схема была вложенной с кодом:

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script> 

Я проверил верхнюю часть HTML для Google, связанные сценарий, и я нашел эти:

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script> 

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script> 

Но когда я создал HTML-файл, как например:

<html> 

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script> 

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script> 

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script> 

</html> 

я не имел диаграмму тренда Google, но я не получил карту и было это:

enter image description here

Когда вы идете на сайт тенденции Google, например http://www.google.com/trends/explore?hl=en-US#q=danbo+robot,danbo+amazon,danbo+yotsuba, есть встроенные скрипты, которые можно скопировать и вставить в html, но когда я поместил его в свой собственный html, он тоже не работал.

Как добавить интерактивную диаграмму трендов Google, как в конце этой страницыhttp://knowyourmeme.com/memes/danbo?

+0

На самом деле, [это работает] (http://jsfiddle.net/8nu2vwbe/). Вы поместили свой код непосредственно в '' тег? Лучше подчиняться структуре 'html> head + body'. – Tommi

+0

Когда я открывал файл html локально с помощью интернет-соединения, я получаю 'Файл или каталог не может быть найден. 'Вместо диаграммы. – alvas

+2

Проблема заключается в том, какой код загружается с сервера google: 'document.write (' ');' This part: 'src =" // 'сообщать браузеру об открытии iframe через тот же протокол, который использует главная страница. Этот протокол является ** файлом: ** в вашем случае, и, очевидно, у вас нет такого пути на вашем жестком диске. используйте локальный сервер для обслуживания своей страницы через ** http: ** – Tommi

ответ

2

Включите результат тренда Google в iframe, и все готово.

<iframe scrolling="no" style="border:none;" width="640" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=danbo+robot,danbo+amazon,danbo+yotsuba &cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=640&h=330"></iframe> 

Demo См

Смежные вопросы