使用实体模型

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'中的大多数图表都没问题，但是 并非所有图表都可以使用相同的数据表......