從同一數據使用實體模型在同一頁上的多個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圖表加載器不再一致地更新。請從現在起使用新的gstatic loader.js。

注：load聲明將是唯一的區別，如下所示...

---

接下來，您可以根據需要吸取儘可能多的圖表，
後load語句完成

您必須設置一個callback才能確定，
谷歌圖表有l oaded所有請求packages的...

多個包可以同時

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

the callback也將等待完成加載文檔...

加載這樣，不需要$(document).ready

---

推薦設置simil AR到下面...

<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'大部分的圖表將被罰款，
不是所有的圖表可以使用相同的數據工作表...