Javascript 结合sql使用google图表api_Javascript_Php_Google Visualization

Javascript 结合sql使用google图表api

javascript php google-visualization

Javascript 结合sql使用google图表api,javascript,php,google-visualization,Javascript,Php,Google Visualization,所以我尝试在GoogleCharts api中使用sql语句，但我不知道如何做到这一点。。。我知道我们不应该在sql中使用javascript（尽管这是可能的），我想知道我到底应该如何在图表中使用数据库中的数据。我已经提出了php语句，其中的元素已经准备好在一个数组中供GoogleCharts api读取，但是我看到的示例我不确定是否可以像其他javascript函数一样传递它，下面是我的示例 <html> <head> <!--Load the

所以我尝试在GoogleCharts api中使用sql语句，但我不知道如何做到这一点。。。我知道我们不应该在sql中使用javascript（尽管这是可能的），我想知道我到底应该如何在图表中使用数据库中的数据。我已经提出了php语句，其中的元素已经准备好在一个数组中供GoogleCharts api读取，但是我看到的示例我不确定是否可以像其他javascript函数一样传递它，下面是我的示例

  <html>
  <head>
      <!--Load the AJAX API-->
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1], 
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>


//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
[‘蘑菇’，3]，
[‘洋葱’，1]，
[Olives'，1]，
[‘西葫芦’，1]，
[意大利香肠，2]
]);
//设置图表选项
var options={'title'：'我昨晚吃了多少比萨饼'，
“宽度”：400，
‘高度’：300}；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}

如果我的php代码中有一个数组，那么当.setonloadcallback（drawchart）不接受任何参数时，如何将它发送到drawchart？我已经试着把参数放在那里，它会打断整个代码段（图表不会显示出来），任何想法都会有帮助

您应该将数据从后端（PHP/MySQL）传输到前端（Javascript）

如果您不需要异步执行，您可以直接复制它们在Javascript代码中，使用GoogleChartAPI中的数组要求注意，在复制代码时应该尊重Javascript语法，这当然是您的问题所在。这里的同步意味着除非重新加载页面，否则图表不会更改

如果您需要异步地使用Ajax，请执行以下操作：

从Javascript异步调用后端的PHP脚本，从数据库中检索一些数据
从PHP脚本中获取数据，然后将其发送到GoogleChartAPI