Ich binde ein Diagramm, das mit der Visualisierungs-API von Google erstellt wurde, in meine Website ein. Dabei habe ich den folgenden Code in einen Iframe als Datei mit dem Namen chart.html eingefügt:

<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>

Dies funktioniert in JS Fiddle einwandfrei, in meiner Datei chart.html jedoch nicht. Stattdessen wird die Fehlermeldung "Eine oder mehrere Schriftarten konnten nicht geladen werden" aus einer Datei mit der Google Charts-API angezeigt.

1
Giuseppe 15 Aug. 2015 im 22:55

3 Antworten

Beste Antwort

Die Google Charts-API für einige Visualisierungen erfordert ein <head></head> -Element auf der Seite. Beim Laden von Schriftarten - sie sind erforderlich, unabhängig davon, ob Sie sie angewiesen haben oder nicht - wird versucht, einige Schriftartenreferenzen an Ihre Kopfzeile anzuhängen. Da jedoch Ihr Kopf fehlt, wird dieser Fehler ausgegeben und nichts an der Stelle des Diagramms gerendert.

Es lässt sich leicht beheben, indem Sie direkt nach Ihrem HTML-Tag ein head-Element hinzufügen.

0
Giuseppe 15 Aug. 2015 im 20:14

Dieser Fehler wird verursacht, weil die Google Charts-API "https://www.gstatic.com/charts/" lautet. loader.js "lädt automatisch die Datei" fonts.css "zum Erstellen von Diagrammen. Wenn eine bereits vorhandene gefunden wird, wird dieser Fehler in der Konsole ausgegeben. Da "fonts.css" die am häufigsten verwendete Datei ist, kann gewählt werden, diese Datei nicht für eine URL mit Grafik zu laden. Dadurch wird der Fehler behoben und das Diagramm geladen.

0
v kay 7 März 2019 im 05:14

Sie müssen sich nicht auf den Kopf stellen. Überprüfen Sie die Verwendung des folgenden Codes in der Datei 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>
0
user3334126 15 Aug. 2015 im 20:12