0

我想使用 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 中显示图表？

4

2 回答 2

0

这是由 Chrome 中的安全限制导致的，以阻止恶意网页访问您的本地文件。在http://en.wikipedia.org/wiki/Same_origin_policy上查看更多信息

您可以通过使用开关从命令/dos 提示符运行 chrome 来暂时禁用它--disable-web-security

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

或者尝试从本地 Web 服务器运行该页面。如果您无权访问IIS ，则可以免费使用Apache和nginx

于 2013-01-29T13:32:39.657 回答
0

我解决了这个问题。我只是使用 Apache/Tomcat 运行这段代码。

我认为我犯的错误是 1. 我必须将此文件保存为 .jsp 格式。2. 添加 var 到图表和选项变量。3.chart = new Highcharts.Chart(options);在success函数中使用this。

于 2013-02-01T04:29:30.773 回答