Question

我在我的网站上嵌入了使用Google可视化API制作的图表。在这样做的过程中，我将以下代码放在iframe中作为名为chart.html的文件：

<html>
  <body>

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
    <div id="chart_div"></div>
    <br/>
    <script type='text/javascript'> ... a whole bunch of Google Chart code which produces a bar, column or line visualization ... </script>
  </body>
</html>

这在JS Fiddle上完全正常，但在我的chart.html文件中不起作用，而是我收到一条错误，上面写着＆＃34;无法加载一个或多个字体＆＃34;来自Google Charts API包含的文件。

Answer 1

某些可视化的Google Charts API 在页面上需要<head></head>个元素。当它加载字体时 - 无论你是否指示它们，它们都是必要的 - 它试图在你的标题中附加一些字体引用，但由于你的头部缺失，它会抛出该错误，然后在图表中不呈现任何内容。的地方。

可以通过在HTML标记后面添加头元素轻松修复。

Answer 2

无需点头，请使用以下代码在chat.html文件中使用

<html>
 <body>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
    <div id="chart_div"></div>
    <br/>
     <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
      chart.draw(view, options);
  }
  </script>
  </body>
 </html>

Answer 3

此错误是由于Google Charts API js“ https://www.gstatic.com/charts/loader.js”自动加载用于创建图形的“ fonts.css”文件，如果发现已经存在的文件，则会在控制台中引发此错误。由于“ fonts.css”是最常用的文件，因此可以选择不为显示图形的URL加载该文件。这样可以消除错误并加载图形。

Google Charts API＆＃34;未捕获错误：无法加载一个或多个字体。＆＃34;

3 个答案: