4

このコードは、グラフ、表、ツールバーを作成するために作成しました。

google.load("visualization", "1", { packages: ["corechart"] });
google.load('visualization', '1', { packages: ['table'] });
//google.setOnLoadCallback(drawChart);

function drawChart() {
    $.ajax({
        type: "GET",
        url: '@Url.Action("GunlukOkumalar", "Enerji")',
        data: "startDate=" + $('#start_date').val() + "&endDate=" + $('#end_date').val() + "&sayac_id=" + $("#sayaclar").val(), //belirli aralıklardaki veriyi cekmek için 

        success: function (result) {
            if (result.success) {
                var evalledData = eval("(" + result.chartData + ")");
                var opts = { curveType: "function", width: '100%', height: 500, pointSize: 5 };
                new google.visualization.LineChart($("#chart_div").get(0)).draw(new google.visualization.DataTable(evalledData, 0.5), opts);
                $('#chart_div').show();

                var visualization;
                var data;
                var options = { 'showRowNumber': true };
                data = new google.visualization.DataTable(evalledData, 0.5);
                // Set paging configuration options
                // Note: these options are changed by the UI controls in the example.
                options['page'] = 'enable';
                options['pageSize'] = 10;
                options['pagingSymbols'] = { prev: 'prev', next: 'next' };
                options['pagingButtonsConfiguration'] = 'auto';

                // Create and draw the visualization.
                visualization = new google.visualization.Table(document.getElementById('table'));
                visualization.draw(data, options);

                var components = [
                    { type: 'html', datasource: data },
                    { type: 'csv', datasource: data }
                ];

                var container = document.getElementById('toolbar_div');
                google.visualization.drawToolbar(container, components);

                return false;
            }
            else {
                $('#chart_div').html('<span style="color:red;"><b>' + result.Error + '</b></span>');
                $('#chart_div').show();

                $('#table').html('<span style="color:red;"><b>' + result.Error + '</b></span>');
                $('#table').show();
                return false;
            }
        }
    });
}

Googleの例 

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1},
       style: 'width: 800px; height: 700px; border: 3px solid purple;'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

GoogleはURLからdataSourceを取得しますが、コントローラーから動的にdataSourceを取得します。エクスポートしようとすると、次のような別のページにページが転送されます。

http://localhost:49972/Enerji/%5Bobject%20Object%5D?tqx=out%3Acsv%3B

動的Jsonデータのエクスポートツールバーを使用するにはどうすればよいですか？このトピックに関する例はありますか？

4

1 に答える 1

0

私もこの問題を抱えていて、たくさんのトロールの後でこれを見つけました！

私はまだそれを実装していませんが、それが進むべき道だと思います。

于 2012-08-14T10:59:46.390 に答える