使用代码创建 Google 图表答案

【问题标题】：Create Google Charts with code使用代码创建 Google 图表
【发布时间】：2017-09-07 12:28:33
【问题描述】：

我希望根据从我的数据库中选择的数据加载一些谷歌图表。（图表数量会因选择而异）

我可以使用以下代码加载单个图表，但我正在努力通过循环列表加载多个图表

我的目的是在做出选择并将数据传递给列表中每个项目的以下代码之前不绘制图表。可能有超过 20 个图表！

非常感谢您的帮助，我使用了C#，但只访问了php 和html

    <html>
      <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        
        google.charts.load('current', {'packages':['corechart']});     
        google.charts.setOnLoadCallback(drawChart);
          
        function drawChart() {
          var jsonData = $.ajax({
              url: "getJSONdata.php",
              dataType: "json",
              async: false
              }).responseText;

          var data = new google.visualization.DataTable(jsonData);

          var options = {
                    title: 'BMU',
                    width: 500,
                    height: 300,
                    series: {
                        0: { lineWidth: 1, pointSize: 1.1 },
                        1: { lineWidth: 1, pointSize: 1.1},
                         2: { lineWidth: 1, pointSize: 1.1}},
                    hAxis: {
                        textStyle:{fontSize: 10},
                        format: 'HH:mm',
                        },
                    vAxis: {
                        textStyle:{fontSize: 10},
                    }, 
                    chartArea: {backgroundColor: '#fffff0'},


                    };
          var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }

        </script>
      </head>

      <body>
        <div id="chart_div" style="float: left; width: 500px; height: 300px;"></div>
     </body>
    </html>

【问题讨论】：

看起来像一个老例子，async: false 已被弃用——你需要循环的列表在哪里？
在这个阶段，我希望使用 php 查询数据库以获取 ID 列表并将它们传递给 getJSONdata.php，其中数据库调用用于图表数据。 getJSONdata.php 目前针对一个 ID 进行了硬编码，并且在生成一张图表的情况下可以正常工作。我正在考虑从身体区域循环。我试图用一个按钮生成同一个图表的多个图表，但没有成功！

标签： javascript php charts google-visualization

【解决方案1】：

您可以设置类似于以下...

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

// load id list
function getList() {
  $.ajax({
    url: 'getList.php',
    dataType: 'json'
  }).done(function (listData) {

    // draw chart for each id
    listData.forEach(function (itemId) {
      drawChart(itemId);
    });

  }).fail(function (jq, text, errMsg) {
    console.log(text + ': ' + errMsg);
  });
}

// draw id chart
function drawChart(itemId) {
  $.ajax({
    url: 'getJSONdata.php',
    dataType: 'json',
    data: {
      id: itemId
    }
  }).done(function (jsonData) {

    var data = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'BMU',
      width: 500,
      height: 300,
      series: {
        0: { lineWidth: 1, pointSize: 1.1 },
        1: { lineWidth: 1, pointSize: 1.1},
        2: { lineWidth: 1, pointSize: 1.1}},
      hAxis: {
        textStyle:{fontSize: 10},
        format: 'HH:mm',
      },
      vAxis: {
        textStyle:{fontSize: 10},
      },
      chartArea: {backgroundColor: '#fffff0'},
    };

    // create new div for chart
    var container = document.getElementById('charts').appendChild(document.createElement('div'));
    var chart = new google.visualization.ScatterChart(container);
    chart.draw(data, options);

  }).fail(function (jq, text, errMsg) {
    console.log(text + ': ' + errMsg);
  });
}

【讨论】：

现在工作正常。只需要在下面的调用中整理添加值到参数
现在工作正常。只需要将煤炭值添加到以下调用“url = 'getList.php?fuel=coal' from a button click
那个 url 应该可以工作，但它也是 data 键的用途，而不是添加到 url，您可以设置数据 --> data: {fuel: 'coal'}
好的，会试试的