從jsfiddle導出Highcharts代碼

我需要從jsfiddle導出我的本地文件的Highcharts代碼。以下是jsfiddle上的圖表代碼：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/yaxis-plotlines/ 它在jsfiddle上運行良好，但是當我將它放入本地文件並在瀏覽器中打開時，圖表不顯示。我從使用的jsfiddle「查看框架的源代碼」獲取代碼，然後這是我得到：從jsfiddle導出Highcharts代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 

    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 


    <style type="text/css"> 

    </style> 

    <title></title> 


<script type='text/javascript'>//<![CDATA[ 

$(function() { 
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { 

     var startDate = new Date(data[data.length - 1][0]), // Get year of last data point 
      minRate = 1, 
      maxRate = 0, 
      startPeriod, 
      date, 
      rate, 
      index; 

     startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point 
     startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()); 

     for (index = data.length - 1; index >= 0; index = index - 1) { 
      date = data[index][0]; // data[i][0] is date 
      rate = data[index][1]; // data[i][1] is exchange rate 
      if (date < startPeriod) { 
       break; // stop measuring highs and lows 
      } 
      if (rate > maxRate) { 
       maxRate = rate; 
      } 
      if (rate < minRate) { 
       minRate = rate; 
      } 
     } 

     // Create the chart 
     $('#container').highcharts('StockChart', { 

      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'USD to EUR exchange rate' 
      }, 

      yAxis: { 
       title: { 
        text: 'Exchange rate' 
       }, 
       plotLines: [{ 
        value: minRate, 
        color: 'green', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Last quarter minimum' 
        } 
       }, { 
        value: maxRate, 
        color: 'red', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Last quarter maximum' 
        } 
       }] 
      }, 

      series: [{ 
       name: 'USD to EUR', 
       data: data, 
       tooltip: { 
        valueDecimals: 4 
       } 
      }] 
     }); 
    }); 
}); 
//]]> 

</script> 


</head> 

<body> 
    <script src="https://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 


<div id="container" style="height: 400px; min-width: 310px"></div> 

</body> 

</html>

所以它只能顯示空白頁。我該如何解決它？謝謝。

來源

2016-03-01 bohkoval

可能試圖打開文件，而不是在服務器上運行它。不能在'file：//'協議中使用ajax。你的代碼[正好在這裏工作得很好]（http://plnkr.co/edit/MdY8rNAodV7szOPV6v71?p=preview） – charlietfl

文件從Highcharts網站（根據OP代碼）加載，所以它不應該是一個問題。 @TheCyberNash你能告訴我們，如果你在JS控制檯有任何錯誤？ –

在將<base href="http://www.highcharts.com/stock/demo/yaxis-plotlines" />添加到頭部後，它在本地正常工作。不知道爲什麼，但它解決了這個問題。

來源

2016-03-01 21:24:31 bohkoval

從jsfiddle導出Highcharts代碼

回答

相關問題