Question

我尝试使用为第一张图表提取的相同数据来设置网页。数据由edmx实体模型提取。以下代码适用于单个图表。我想使用相同的数据在同一页面上添加饼图。我见过的所有例子都是使用静态数据的图表。我的代码在下面，我知道我需要以某种方式重现我拥有的东西。谢谢，

  <script type="text/javascript" src="https://www.google.com/jsapi">
  </script>
  @section Scripts{
  <script>

    $(document).ready(function () {
        //Load Data Here
        var chartData = null;
        $.ajax({
            url: '/GoogleChart/GetSalesData',
            type: 'GET',
            dataType: 'json',
            data: '',
            success: function (d) {
                chartData = d;
            },
            error: function () {
                alert('Error!');
            }
        }).done(function () {
            drawChart(chartData);
        });
    });

    function drawChart(d) {
        var chartData = d;
        var data = null;
        data = google.visualization.arrayToDataTable(chartData);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, {
            type: 'number',
            label: data.getColumnLabel(0),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(1),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(2),
            calc: function () { return 0; }

        }]);

        var chart = new google.visualization.ColumnChart(document.getElementById('visualization1'));

        var options = {

        }

        var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
            google.visualization.events.removeListener(runFirstTime);
            chart.draw(data, options);
        });

        chart.draw(view, options);
    }

    google.load('visualization', '1', { packages: ['corechart'] });

</script>

<div id="visualization1" style="width:900px; height:500px"></div>


  }

Answer 1

首先，建议使用...

<script src="https://www.gstatic.com/charts/loader.js"></script>

不......

<script src="https://www.google.com/jsapi"></script>

根据release notes ...

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

注意：load语句将是唯一的区别，如下所示......

接下来，您可以根据需要绘制尽可能多的图表，
在 load语句完成后

您必须设置callback才能确定谷歌图表已加载所有请求的packages ...

可以同时加载多个包

google.charts.load('current', { callback: loadData, packages: ['corechart', 'table'] });

the callback 也会等待文档完成加载......

因此，不需要$(document).ready

建议类似以下设置...

<script src="https://www.gstatic.com/charts/loader.js"></script> @section Scripts{ <script> function loadData() { $.ajax({ url: '/GoogleChart/GetSalesData', type: 'GET', dataType: 'json', data: '', }).fail(function (jq, text, errMsg) { console.log(text + ': ' + errMsg); }).done(function (jsonData) { drawCharts(jsonData); }); } function drawCharts(jsonData) { var chartData = google.visualization.arrayToDataTable(jsonData); var chartCol = new google.visualization.ColumnChart(document.getElementById('visualization-col')); chartCol.draw(chartData); var chartPie = new google.visualization.PieChart(document.getElementById('visualization-pie')); chartPie.draw(chartData); var chartTable = new google.visualization.Table(document.getElementById('visualization-table')); chartTable.draw(chartData); } google.charts.load('current', { callback: loadData, packages: ['corechart', 'table'] }); </script> <div id="visualization-col"></div> <div id="visualization-pie"></div> <div id="visualization-table"></div> }

注意：每个图表都有一个特定的data format

虽然'corechart'中的大多数图表都没问题，但是并非所有图表都可以使用相同的数据表......

使用实体模型

1 个答案: