如何在谷歌图表上使用mysql数据

Posted 2021-04-09

我正在尝试使用谷歌图表和mysqli创建条形图。但是当我尝试在googlecharts中插入php时，我的代码无效，它不再显示在网页上。

我的代码：

 <!--GOOGLE CHARTS-->
<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">

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

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

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

      <?php
      if(isset($_GET['id'])) {
$ID= 'id';
$childId=$_GET['id']; 
$rowId=$_GET['id']; 
$chartsql = "SELECT `feis_entered`, `competition_level1`, `dance_name1`,  `firstpl_score1`, `2ndpl_score1`, `3rdpl_score1` FROM `mark_cards1` WHERE id = '$rowId'";
$chartres = mysqli_query($con,$chartsql);
$chartrow=mysqli_fetch_array($chartres);
if($chartres){
    $compName = '.$chartrow["feis_entered"].';
    $compLvl = '.$chartrow["competition_level1"].';
    $danceName = '.$chartrow["dance_name1"].';
    $first = '.$chartrow["firstpl_score1"].';
    $second = '.$chartrow["2ndpl_score1"].';
    $third = '.$chartrow["3rdpl_score1"].';
}

}
?>
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Ranking');
    data.addColumn('number', 'Score');
    data.addRows([
      ['1st Place', <?php echo $first;?>],
      ['2nd Place', <?php echo $second;?>],
      ['3rd Place', <?php echo $third;?>]
    ]);

    var data = google.visualization.arrayToDataTable([
        ['Element', 'Score', { role: 'style' }],
        [ '1st Place', <?php echo $first;?>, 'color: #91b224',],
        [ '2nd Place', <?php echo $second;?>, 'color: #91b224',],
        [ '3rd Place', <?php echo $third;?>, 'color: #91b224',],
   ]);

    // Set chart options
    var options = {title:'<?php echo $compName - $compLvl - $danceName;?>',
                   colors: ['#91b224'],
                   is3D:true,
                   width:600,
                   height:550};





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

第一名，第二名和第三名是田地。 CompName，compLvl和danceName是标题。

编辑下面的源代码图片

答案

图表值应该是数字而不是字符串......

尝试删除引号......

从...

$first = '.$chartrow["firstpl_score1"].';
$second = '.$chartrow["2ndpl_score1"].';
$third = '.$chartrow["3rdpl_score1"].';

至...

$first = $chartrow["firstpl_score1"];
$second = $chartrow["2ndpl_score1"];
$third = $chartrow["3rdpl_score1"];