使用实体模型在同一页面上来自同一数据的多个 Google 图表

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 Charts 版本不再持续更新。从现在开始请使用新的 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' 中的大多数图表都可以，
并非所有图表都可以使用相同的数据表...