HighCharts僅在Internet Explorer中有效

Question

我想使用Highcharts插件創建圖形，並且數據應解析為XML文件。 XML文件data2.xml是，

<data>  
<row><t>1347559200</t><v>2.1600000000e+01</v></row> 
<row><t>1347562800</t><v>2.1504694630e+01</v></row> 
<row><t>1347566400</t><v>2.1278633024e+01</v></row> 
</data>

HTML編碼是

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>line chart</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function(){

    options = {
      chart: {
          renderTo: 'container',
          type: 'spline'
      },
      title: {
          text: 'Temperatures'
      },
      subtitle: {
          text: 'An example of time data in Highcharts JS'
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: { // don't display the dummy year
              month: '%e. %b',
              year: '%b'
          }
      },
      yAxis: {
          title: {
              text: 'T (°C)'
          },
          min: 0
      },
      tooltip: {
          formatter: function() {
                  return '<b>'+ this.series.name +'</b><br/>'+
                  Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
          }
      },

      series: [{
          name: 'Temperature',
          data: []
      }]
    }

  $.ajax({
    type: "GET",
    url: "data2.xml",
    dataType: "xml",
    success: function(xml) {
      var series = {  data: []
                  };

      $(xml).find("row").each(function()
      {
          var t = parseInt($(this).find("t").text())*1000
          var v = parseFloat($(this).find("v").text())
          series.data.push([t,v]);
      });
      options.series.push(series);
    }
  });

  chart = new Highcharts.Chart(options);
});
  </script>
</body>
</html>

如果我執行此代碼，它將在Internet Explorer中正常打開並將結果顯示為

Internet Explorer中的結果

當我在Chrome中打開此文件時，結果如下：

結果在谷歌瀏覽器中

錯誤消息：

XMLHttpRequest cannot load file:///C:/data2.xml. Origin null is not allowed by Access-    Control-Allow-Origin.

因此我使用Tomcat服務器來運行它。 雖然它顯示相同的圖表圖像，但沒有提到錯誤消息。

如何克服這個？ 如何解決此問題，如何從xml文件中獲取數據，從而在Google Chrome中顯示圖表？

Answer 1

這是由Chrome中的安全限制所致，該安全限制可阻止惡意網頁訪問您的本地文件。 在http://en.wikipedia.org/wiki/Same_origin_policy上了解有關此內容的更多信息

您可以通過使用--disable-web-security開關在命令/ DOS提示符下運行chrome來暫時禁用它

例如chrome.exe --disable-web-security

或者嘗試從本地Web服務器運行頁面。 如果您無權訪問IIS，則可以免費使用Apache和Nginx

Answer 2

我解決了這個問題..我只是使用Apache / Tomcat運行此代碼。

我認為我犯的錯誤是1.我必須以.jsp格式保存此文件。 2.將var添加到圖表和選項變量。 3.使用此chart = new Highcharts.Chart(options); 在成功函數中。

HighCharts僅在Internet Explorer中有效

問題描述

2 個解決方案

解決方案1
0 2013-01-29 13:32:39

解決方案2
0 已采納 2013-02-01 04:29:30

HighCharts僅在Internet Explorer中有效

問題描述

2 個解決方案

解決方案1 0 2013-01-29 13:32:39

解決方案2 0 已采納 2013-02-01 04:29:30

解決方案1
0 2013-01-29 13:32:39

解決方案2
0 已采納 2013-02-01 04:29:30