html - 如何以自适应宽度和高度将谷歌图表（html文件）嵌入到html网页中

问题描述

刚学会用google chart api画图如下： Demo chart

该图表现在是一个名为“demo_chart.html”的 html 文件，其代码为：


<html>
  <head>
  <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript", charset="utf-8">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('number','Annual Compensation');
          data.addColumn('number','count');
          data.addColumn({type:"string",role:"tooltip", 'p':{'html': true}});
          var a = [[10, 1, '0.3%'], [12, 2, '0.9%'], [14, 2, '1.6%'], [16, 4, '2.8%'], [18, 5, '4.3%'], [20, 14, '8.7%'], [22, 22, '15.5%'], [24, 40, '28.0%'], [26, 15, '32.6%'], [28, 28, '41.3%'], [30, 26, '49.4%'], [32, 22, '56.2%'], [34, 15, '60.9%'], [36, 17, '66.1%'], [38, 9, '68.9%'], [40, 17, '74.2%'], [42, 5, '75.8%'], [44, 14, '80.1%'], [46, 7, '82.3%'], [48, 3, '83.2%'], [50, 16, '88.2%'], [52, 6, '90.1%'], [54, 4, '91.3%'], [56, 3, '92.2%'], [58, 1, '92.5%'], [60, 3, '93.5%'], [62, 6, '95.3%'], [64, 2, '96.0%'], [66, 0, '96.0%'], [68, 1, '96.3%'], [70, 2, '96.9%'], [72, 1, '97.2%'], [74, 0, '97.2%'], [76, 0, '97.2%'], [78, 0, '97.2%'], [80, 1, '97.5%'], [82, 0, '97.5%'], [84, 1, '97.8%'], [86, 0, '97.8%'], [88, 0, '97.8%'], [90, 1, '98.1%'], [92, 0, '98.1%'], [94, 0, '98.1%'], [96, 0, '98.1%'], [98, 0, '98.1%'], [100, 1, '98.4%'], [102, 0, '98.4%'], [104, 0, '98.4%'], [106, 0, '98.4%'], [108, 0, '98.4%'], [110, 2, '99.1%'], [112, 0, '99.1%'], [114, 0, '99.1%'], [116, 0, '99.1%'], [118, 0, '99.1%'], [120, 1, '99.4%'], [122, 0, '99.4%'], [124, 0, '99.4%'], [126, 0, '99.4%'], [128, 0, '99.4%'], [130, 0, '99.4%'], [132, 0, '99.4%'], [134, 0, '99.4%'], [136, 0, '99.4%'], [138, 0, '99.4%'], [140, 1, '99.7%'], [142, 0, '99.7%'], [144, 0, '99.7%'], [146, 0, '99.7%'], [148, 0, '99.7%'], [150, 1, '100.0%']];
          var b = HTML_format(a);
          data.addRows(b);
        var options = {
          title: 'Demo Column Chart',
          legend: { position: 'none' },
          tooltip: {isHtml: true}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      
      function HTML_format(a)
      {
          var b = [];
          var scale = a[1][0] - a[0][0];
          for(var i=0; i<a.length; i++)
          {
              var text;
              if(i < a.length - 1)
              {
                text = "demo";
              }
              else
              {
                 text = "demo";
              }
              b.push([a[i][0], a[i][1], text]);
          }
          return b;
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我想将图表嵌入另一个网页并使用 iframe：

<tbody><tr><td class ='x text-center' style='align-items:center'><iframe src='demo_chart.html' style='width:900px;height:500px; border:0;max-width:100%' scrolling='no'></iframe></td><td class ='y' style=''><iframe src='demo_chart.html' style='width:900px;height:500px; border:0;     max-width:100% ' scrolling='no'></iframe></td></tr></tbody>

它在我的桌面上运行良好，但在移动端看起来很丑： mobile_chart。

谁能帮我弄清楚如何正确嵌入 html 文件，以便无论宽度如何都能正确显示它？

标签： htmlcssgoogle-visualizationresponsive

解决方案

您的问题似乎是您的可视化选项有问题。您需要在选项中将chartArea属性设置为left:0。在弄乱了这些属性之后，我想出了这些选项：chartArea: {left: 0,top: 25}

所以你的选择应该是这样的：

var options = 
{
    title: 'Demo Column Chart',
    legend: { position: 'none' },
    tooltip: {isHtml: true},
    chartArea: {left: 0,top: 25}
};

我还建议添加margin: auto;到您的图表 div 以添加主文件上留下的空白：

<div id="chart_div" style="width: 900px; height: 500px;margin: auto;"></div>

所以你的demo_chart.html文件应该是这样的：

demo_chart.html

<html>
<head>
    <meta charset="utf-8">
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript", charset="utf-8">
        google.charts.load("current", {packages:["corechart"]});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('number','Annual Compensation');
            data.addColumn('number','count');
            data.addColumn({type:"string",role:"tooltip", 'p':{'html': true}});
            var a = [[10, 1, '0.3%'], [12, 2, '0.9%'], [14, 2, '1.6%'], [16, 4, '2.8%'], [18, 5, '4.3%'], [20, 14, '8.7%'], [22, 22, '15.5%'], [24, 40, '28.0%'], [26, 15, '32.6%'], [28, 28, '41.3%'], [30, 26, '49.4%'], [32, 22, '56.2%'], [34, 15, '60.9%'], [36, 17, '66.1%'], [38, 9, '68.9%'], [40, 17, '74.2%'], [42, 5, '75.8%'], [44, 14, '80.1%'], [46, 7, '82.3%'], [48, 3, '83.2%'], [50, 16, '88.2%'], [52, 6, '90.1%'], [54, 4, '91.3%'], [56, 3, '92.2%'], [58, 1, '92.5%'], [60, 3, '93.5%'], [62, 6, '95.3%'], [64, 2, '96.0%'], [66, 0, '96.0%'], [68, 1, '96.3%'], [70, 2, '96.9%'], [72, 1, '97.2%'], [74, 0, '97.2%'], [76, 0, '97.2%'], [78, 0, '97.2%'], [80, 1, '97.5%'], [82, 0, '97.5%'], [84, 1, '97.8%'], [86, 0, '97.8%'], [88, 0, '97.8%'], [90, 1, '98.1%'], [92, 0, '98.1%'], [94, 0, '98.1%'], [96, 0, '98.1%'], [98, 0, '98.1%'], [100, 1, '98.4%'], [102, 0, '98.4%'], [104, 0, '98.4%'], [106, 0, '98.4%'], [108, 0, '98.4%'], [110, 2, '99.1%'], [112, 0, '99.1%'], [114, 0, '99.1%'], [116, 0, '99.1%'], [118, 0, '99.1%'], [120, 1, '99.4%'], [122, 0, '99.4%'], [124, 0, '99.4%'], [126, 0, '99.4%'], [128, 0, '99.4%'], [130, 0, '99.4%'], [132, 0, '99.4%'], [134, 0, '99.4%'], [136, 0, '99.4%'], [138, 0, '99.4%'], [140, 1, '99.7%'], [142, 0, '99.7%'], [144, 0, '99.7%'], [146, 0, '99.7%'], [148, 0, '99.7%'], [150, 1, '100.0%']];
            var b = HTML_format(a);
            data.addRows(b);
            var options = {
            title: 'Demo Column Chart',
            legend: { position: 'none' },
            tooltip: {isHtml: true},
            chartArea: {left: 0,top: 25}
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
        
        function HTML_format(a)
        {
            var b = [];
            var scale = a[1][0] - a[0][0];
            for(var i=0; i<a.length; i++)
            {
                var text;
                if(i < a.length - 1)
                {
                    text = "demo";
                }
                else
                {
                    text = "demo";
                }
                b.push([a[i][0], a[i][1], text]);
            }
            return b;
        }
        </script>
    </head>
    <body>
        
        <div id="chart_div" style="width: 900px; height: 500px;margin: auto;"></div>
    </body>
</html>

这应该可以解决您的问题。

html - 如何以自适应宽度和高度将谷歌图表（html文件）嵌入到html网页中

问题描述

解决方案

推荐阅读