jsapi 在 Visual Studio 2015 中不起作用

Question

<script src="../BootStrapFiles/jsapi" type="text/javascript"></script>     
<script type="text/javascript">
    google.load('visualization', '1', { packages: ['corechart'] });
    // google.load('visualization', '1.1', { 'packages': ['bar'] });
</script>  
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'Default.aspx/GetChartData',
            data: '{}',
            success:
            function (response) {
                drawchart(response.d);
            },

            error: function () {
                alert("Error loading data!");
            }
        });
    })
    function drawchart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Total amount');
        //   data.addColumn('string', 'Total amount2');

        for (var i = 0; i < dataValues.length; i++) {
            // data.addRows([dataValues[i].Year, dataValues[i].Total], dataValues[i].Year);
            data.addRow([dataValues[i].Year, dataValues[i].Total]);
        }

        //   new google.visualization.PieChart
        //  new google.visualization.BarChart(  //LineChart  //ColumnChart  //ComboChart
        new google.visualization.PieChart(document.getElementById('myChartDivPie')).
        draw(data, { title: "Sales Pie chart last 8 days " });

        new google.visualization.ColumnChart(document.getElementById('myChartDiv')).
        draw(data, { title: "Sales Column chart last 8 days " });

    }  
</script> 

这是我在 Visual Studio 2010 上运行时的代码，它运行完美。但是当尝试在visual studio 2015上运行时图表没有出现。你能帮我看看我在做什么错吗。是版本问题还是其他问题？我的代码是在 Visual Studio 2010 中开发的。一切都很完美，但图表不可见。

Answer 1

first：有一个callback与load语句相关联

在callback 被触发之前，您不应该尝试使用google.visualization 命名空间......

看下面的sn-p...

<script src="../BootStrapFiles/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load('visualization', '1', {
      // set callback
      callback: getData,
      packages: ['corechart']
    });
</script>
<script type="text/javascript">
    // load google first
    function getData() {
      $.ajax({
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          url: 'Default.aspx/GetChartData',
          data: '{}',
          success:
          function (response) {
              drawchart(response.d);
          },

          error: function () {
              alert("Error loading data!");
          }
      });
    }
    function drawchart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Total amount');
        //   data.addColumn('string', 'Total amount2');

        for (var i = 0; i < dataValues.length; i++) {
            // data.addRows([dataValues[i].Year, dataValues[i].Total], dataValues[i].Year);
            data.addRow([dataValues[i].Year, dataValues[i].Total]);
        }

        //   new google.visualization.PieChart
        //  new google.visualization.BarChart(  //LineChart  //ColumnChart  //ComboChart
        new google.visualization.PieChart(document.getElementById('myChartDivPie')).
        draw(data, { title: "Sales Pie chart last 8 days " });

        new google.visualization.ColumnChart(document.getElementById('myChartDiv')).
        draw(data, { title: "Sales Column chart last 8 days " });

    }
</script>

---

下一步：推荐使用loader.js，而不是jsapi

根据release notes...

通过jsapi 加载程序仍然可用的 Google 图表版本不再持续更新。从现在开始请使用新的 gstatic loader。

该库似乎已下载到本地文件夹

更新的库可以在这里找到...

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

这只会改变load 语句...

    google.charts.load('current', {
      // set callback
      callback: getData,
      packages: ['bar']
    });