Question

这次我正在学习Google Charts，下面的代码展示了如何将数组发送到绘制图表的函数中：

$.get("Inform.php?proyecto="+$("#Proyectos option:selected").text(), function( data ){
                $.each(data, function(id,value){
                    var tmp = {
                        'value1':""+value['value1']+"",
                        'value2':""+value['value2']+"",
                        'solution':""+value['solution']+""
                    };
                    ListaA.push(tmp);
                }); 
            });
            google.load('visualization', '1', {'packages': ['corechart']});
            google.setOnLoadCallback(drawChart);
            return;

现在是drawChart（）函数

function drawChart(){
    try{
        var dataTable = new google.visualization.DataTable(listaA);
        var options = {
            'title':'Title',
            'width':400,
            'height':300
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(dataTable, options); 
    }catch(err){
        alert(err.message);
    }
}

最后加载图表的HTML元素就是这个

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

正如你在第二块代码中看到的那样，我使用try / catch来了解我可以从那里得到什么样的错误，但我什么都没有，没有错误，没有绘制图表，也许我在阵列上做错了或者调用图表功能，我不知道。

我希望你能帮助我如何正确调用这个函数，以获得与我的数组相关的图表。感谢您的时间和关注。

Answer 1

需要加载Google Visualization API：

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

此外，加载corecharts时，命名空间为：

google.charts.load和google.charts.visualization

不

google.load和google.visualization

在这个工作片段中，我们已经取代了这个：

$.get("Inform.php?proyecto="+$("#Proyectos option:selected").text(), function( data ){
                $.each(data, function(id,value){
                    var tmp = {
                        'value1':""+value['value1']+"",
                        'value2':""+value['value2']+"",
                        'solution':""+value['solution']+""
                    };
                    ListaA.push(tmp);
                }); 
            });

使用简单的数组数组（也称为多维数组，又称数据表）和arrayToDataTable()方法。在使用Google Visualization之前，有很多方法可以收集和格式化数据，但是AFAIK，数据最终将作为数组数组，或者是一个代表数组数组的非常复杂的JSON。但是我们准备我们的数据，我们应该记住第一列必须是字符串（如果我们有水平和垂直表头，那么它的第一行和第一列。）

数据来源未知，即使可以访问，数据仍然有问题。如果我理解，ListaA将是一个对象数组。 每个元素 看起来像一行标题和一行数据......不确定是否接受了这一行。您可能必须让GV以DataTable方式处理您的数据，而不是使用arrayToDataTable()方法。

如果您的数据排列正确，那么只需添加前三个修复程序并进行测试即可。如果它突出显示有关DataTable和/或数据的红色高亮显示的错误消息，那么您需要提供数据，以便最终成为数组数组。

<强>段

＆＃13;

/*

Replace: 

var data = [
      ['col', 'col','col'],
      ['value',1,2],
      ['solution',3,1]
      ];
      
With your own data: 

$.get("Inform.php?proyecto=" + $("#Proyectos option:selected") 
   ...
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="piechart" style="width: 900px; height: 500px;"></div>

<input id='data' type='hidden'>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load('visualization', '1', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {
      var data = [
      ['col', 'col','col'],
      ['value',1,2],
      ['solution',3,1]
      ];

      var dataTable = new google.visualization.arrayToDataTable(data);
      var options = {
        'title': 'Title',
        'width': 400,
        'height': 300
      };
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(dataTable, options);

  }
</script>

＆＃13;

来自JQuery阵列的Google Chart

1 个答案: