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で正常に開き、結果が次のように表示されます。

InternetExplorerでの結果

このファイルをChromeで開くと、次のような結果が得られます。

グーグルクロームの結果

エラーメッセージ付き：

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

そのため、Tomcatサーバーを使用してこれを実行しました。上記のエラーメッセージなしで同じチャート画像を表示しますが。

これを克服する方法は?? この問題を解決してxmlファイルからデータを取得してGoogleChromeでグラフを表示するにはどうすればよいですか？

4

2 に答える 2

0

これは、悪意のある Web ページによるローカル ファイルへのアクセスを阻止するための 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.チャートとオプション変数に変数を追加します。3. これchart = new Highcharts.Chart(options);を success 関数内で使用します。

于 2013-02-01T04:29:30.773 に答える