1

http://codeblitz.wordpress.com/2009/06/22/jquery-charts/から入手できるコードを使用しました

jqPlotを使用しています。したがって、動作する次のサンプル コード Default.html があります。

<script type="text/javascript">

var jsonObj = { "pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'] };

$(function () {
    $.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});

    function CreateBarChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: jsonObj.xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{
                   barPadding: 8,
                   barMargin: 10
               }
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }
</script>

コードをコピーして、Default.aspx に配置しました。変更したいのは、外部ファイルからデータを取得できるようにすることだけなので、コードは次のようになります。

<script type="text/javascript">

  var jsonObj;
  $.getJSON('example.json', function (response)
  {
    jsonObj = response;
    alert(jsonObj.property);
  });

$(function () {
  $.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
    });

    function CreateBarChartOptions()
    {
      var optionsObj = {
        title: 'Blog Statistics',
        axes: {
          xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: jsonObj.xAxis
          }
        },
        series: [{ label: 'Page Hits' }, { label: 'RSS Hits'}],
        legend: {
          show: true,
          location: 'nw'
        },
        seriesDefaults: {
          shadow: true,
          renderer: $.jqplot.BarRenderer,
          rendererOptions: {
            barPadding: 8,
            barMargin: 10
          }
        },
        highlighter: {
          showTooltip: true,
          tooltipFade: true
        }
      };
      return optionsObj;
    }

</script>

しかし、jsonObj は常に未定義です。ファイルが適切にフォーマットされていないと思います。これを含めるためにexample.jsonを試しました：

{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['2009 年 1 月' , '2009 年 2 月', '2009 年 3 月', '2009 年 4 月', '2009 年 5 月', '2009 年 6 月', '2009 年 7 月']}

この：

{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ["2009 年 1 月" 、「2009 年 2 月」、「2009 年 3 月」、「2009 年 4 月」、「2009 年 5 月」、「2009 年 6 月」、「2009 年 7 月」]}

しかし、役に立たない。私は何を間違っていますか？

ご協力ありがとうございます。

ジュリアン

4

1 に答える 1

2

おそらく次のようなことをする必要があります：

$.getJSON('example.json', function (response)
{
  var jsonObj = response;
  $.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});

jqplot をトリガーする annon 関数は「インライン」で実行されますが、ajax の読み込みは引き続き行われます。

于 2012-07-10T13:46:52.477 に答える