Как адаптивная диаграмма Google получается из тега iframe? - PullRequest
Новая
       51

Как адаптивная диаграмма Google получается из тега iframe?

0 голосов
/ 17 июня 2020

Я хочу создать диаграмму из таблицы Google. Экспортирую диаграмму из таблицы, беру URL. Но я не могу сделать его отзывчивым из-за проблемы с корсами. Итак, я думал, что весь iframe реагирует на преобразование: масштаб? Но это не могло быть хорошим решением. У вас есть идея сделать этот iframe адаптивным?

Ниже мой фрагмент: - 

<div
        class="responsive"
     
      >
        <iframe
        width="698.1827830188679"
          height="305.5"
          seamless
          frameborder="0"
          scrolling="no"
          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&amp;format=interactive"
        ></iframe>
      </div>

Также вы можете проверить скрипт ниже:

https://jsfiddle.net/qtro2Lz5/

1 Ответ

0 голосов
/ 19 июня 2020

Я также столкнулся с этой проблемой для этой опубликованной таблицы Google Spreadsheet . Кстати, ваш заголовок вводит в заблуждение, это не Google Chart , это еще один продукт, отличный от Google для создания действительно правильных веб-диаграмм, , который также может реагировать и также с использованием Данные электронных таблиц .

Возвращаясь к проблеме, само содержимое «Google Spreadsheet Published Chart» не отвечает, это не о том, как заставить сам iframe реагировать.

Iframe может быть отзывчивым, но мы не можем изменить содержимое диаграммы из опубликованной электронной таблицы Google, чтобы оно было отзывчивым, afaik. *. 

http://jsfiddle.net/marhensa/g9op54wx/

Также есть еще один интересный трюк, подобный этому 

https://codepen.io/alxfyv/pen/QEjEbp

, но проблема в iframe контент также должен быть отзывчивым .

Если вы просто хотите, чтобы это работало и было действительно просто, не используйте iframe, используйте простое адаптивное изображение , просто измените конец вашего publi shed URL-адрес таблицы Google Spreadsheet от format = interactive к format = image

К сожалению, правильный метод решения этой проблемы - это только МАСШТАБИРОВАНИЕ , как вы сказали, чтобы преобразовать / масштабировать его в своем вопросе. Если содержимое оболочки не реагирует, и вы хотите динамически изменить его размер (текст также будет меньше), как в этом записанном примере , тогда масштабирование будет. Этот пример представляет собой текст HTML и некоторую графическую страницу c, кстати, при масштабировании он ведет себя как файл SVG / изображения.

Объясняется здесь: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript

Также сделано в Angular здесь: https://stackblitz.com/edit/angular-vagpoq

РЕДАКТИРОВАТЬ: Если вы можете жить с масштабированием и меньшими текстовыми / тонкими линиями, рабочее решение использует это JS + JQuery Метод масштабирования в HTML разделе заголовка, это написано yazzz здесь , слава ему / ему в этой ссылке, а не здесь. 

<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
    $("#wrapper").each(function() {
        var $wrap = $(this);
        function iframeScaler(){
            var wrapWidth = $wrap.width(); // width of the wrapper
            var wrapHeight = $wrap.height();
            var childWidth = $wrap.children("iframe").width(); // width of child iframe
            var childHeight = $wrap.children("iframe").height(); // child height
            var wScale = wrapWidth / childWidth;
            var hScale = wrapHeight / childHeight;
            var scale = Math.min(wScale,hScale);  // get the lowest ratio
            $wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" });  // set scale
        };
        $(window).on("resize", iframeScaler);
        $(document).ready( iframeScaler);
    });
});
</script>
</head>

<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>

<div id="wrapper">
    <iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&amp;format=interactive"></iframe>
</div>

</body>

Также вы можете просмотреть его / ее реализацию моего образца здесь, в JS Fiddle 

https://jsfiddle.net/marhensa/10radjqo
...