Javascript在jsfiddle上工作，但不在本地主機上

我試圖將谷歌圖表轉換爲圖像。我發現我需要上的jsfiddle（http://jsfiddle.net/SCjm8/32/）一個完美的例子，但正如我在我的本地我收到此錯誤的代碼粘貼：Javascript在jsfiddle上工作，但不在本地主機上

Uncaught ReferenceError: canvg is not defined

爲什麼它的jsfiddle，而不是在我的本地工作？

編輯：只是需要從分別位於左側是的jsfiddle添加3個外部資源，將在未來

來源

2013-05-19 Edgar

你做的，當然也包括包含在3個資源小提琴，看到左邊的菜單，它說「外部資源」？ – adeneo

哦哇，我不知道：謝謝，我認爲它現在會工作 – Edgar

的jsfiddle知道這允許用戶添加引用外部資源。在上面的jsfiddle中有對canvg.js的引用。看看你的消息，看起來你缺少對這個文件的引用。要查看小提琴引用的所有外部引用，請展開外部資源並將這些引用添加到localhost文件中。

在你的jsfiddle，有三個外部JavaScript文件：

確保您和借鑑所有這些。

有關jsfiddle的更多信息，請訪問documentation頁面。

來源

2013-05-19 14:10:49

更多信息在這裏 - https://code.google.com/p/canvg/ – x20mar

正如@Pitamber提到你需要添加這裏convg庫的詳細信息 - https://code.google.com/p/canvg/

所以工作的例子是

<!-- 
To change this template, choose Tools | Templates 
and open the template in the editor. 
--> 
<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
</head> 
<body> 
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9"> 
     Image will be placed here 
    </div> 

    <button onclick="saveAsImg(document.getElementById('pie_div'));">Save as PNG Image</button> 
    <button onclick="toImg(document.getElementById('pie_div'), document.getElementById('img_div'));">Convert to image</button> 
    <div id="pie_div"></div> 
</body> 
<script> 
     function getImgData(chartContainer) { 
      var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
      var svg = chartArea.innerHTML; 
      var doc = chartContainer.ownerDocument; 
      var canvas = doc.createElement('canvas'); 
      canvas.setAttribute('width', chartArea.offsetWidth); 
      canvas.setAttribute('height', chartArea.offsetHeight); 


      canvas.setAttribute(
        'style', 
        'position: absolute; ' + 
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + 
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
      doc.body.appendChild(canvas); 

      canvg(canvas, svg); 
      var imgData = canvas.toDataURL('image/png'); 
      canvas.parentNode.removeChild(canvas); 
      return imgData; 
     } 

     function saveAsImg(chartContainer) { 
      var imgData = getImgData(chartContainer); 

      // Replacing the mime-type will force the browser to trigger a download 
      // rather than displaying the image in the browser window. 
      window.location = imgData.replace('image/png', 'image/octet-stream'); 
     } 

     function toImg(chartContainer, imgContainer) { 
      var doc = chartContainer.ownerDocument; 
      var img = doc.createElement('img'); 
      img.src = getImgData(chartContainer); 

      while (imgContainer.firstChild) { 
       imgContainer.removeChild(imgContainer.firstChild); 
      } 
      imgContainer.appendChild(img); 
     } 

     google.load('visualization', '1', {packages: ['corechart', 'treemap', 'geochart']}); 

     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
      // Pie chart 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Task'); 
      data.addColumn('number', 'Hours per Day'); 
      data.addRows(5); 
      data.setValue(0, 0, 'Work'); 
      data.setValue(0, 1, 11); 
      data.setValue(1, 0, 'Eat'); 
      data.setValue(1, 1, 2); 
      data.setValue(2, 0, 'Commute'); 
      data.setValue(2, 1, 2); 
      data.setValue(3, 0, 'Watch TV'); 
      data.setValue(3, 1, 2); 
      data.setValue(4, 0, 'Sleep'); 
      data.setValue(4, 1, 7); 

      var chart = new google.visualization.PieChart(document.getElementById('pie_div')); 
      chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'}); 

     } 
    </script> 
</html>

來源

2013-05-19 14:17:59 x20mar

Javascript在jsfiddle上工作，但不在本地主機上

回答

相關問題