2015-08-15 42 views
0

我在我的網站上嵌入了使用Google可視化API製作的圖表。這樣做,我已經把下面的代碼的iframe作爲一個名爲chart.html:Google Charts API「Uncaught Error:無法加載一個或多個字體」。

<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小提琴完美的罰款,但我chart.html文件不能正常工作,而不是我從Google Charts API包含的文件中收到一條說明「一個或多個字體無法加載」的錯誤。

回答

0

谷歌圖表API 對於一些可視化需要頁面上的<head></head>元素。當它加載字體時 - 無論您是否指示它們,它們都是必需的 - 它會嘗試將一些字體引用附加到您的標題,但是由於您的頭部缺失,它會引發該錯誤,然後在圖表的位置不呈現任何內容。

通過在HTML標籤後添加一個head元素可以很容易地解決這個問題。

0

沒有必要把頭部,檢查下面的代碼使用它在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> 
相關問題