Google 图表和 php 数组

Question

我有以下三个 php 数组。其中三个是键值对

$needles = ["Needle1", "Needle2", "Needle3", "Needle4", "Needle5"];

$uph1 = ["Needle1" => 3, "Needle3" => 5, "Needle4" => 7];

$uph2 = ["Needle1" => 4, "Needle2" => 2, "Needle3" => 4];

$uph3 = ["Needle1" => 4, "Needle2" => 5, "Needle3" => 7, "Needle4" => 2];

$numberOfItems 是 $needles 数组中的项目总数，即 5

我正在尝试使用 google 图表绘制此图，如下所示

以下正在加载 google 个图表

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

以下是显示图表div

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

以下是填充图表

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Needle', 'One', 'Two', 'Three'],
    <?php
                
            for($i=0; $i<$numberOfItems; $i++){
                if(array_key_exists($needles[$i],$uph1) || array_key_exists($needles[$i],$uph2) || array_key_exists($needles[$i],$uph3)){
                    if($i != ($numberOfItems-1)){
                        
//                        echo '["'.$needles[$i].'", 2, 4, 6],'; //This is working
                        echo '["'.$needles[$i].'", '.$uph1[$needles[$i]].', '.$uph2[$needles[$i]].', '.$uph3[$needles[$i]].'],'; //This is not working
                    }else{
//                        echo '["'.$needles[$i].'", '.$uph1[$needles[$i]].', '.$uph2[$needles[$i]].', '.$uph3[$needles[$i]].']';
                    }
                }
            }
            ?>

  ]);

  var options = {
    title: 'Average UPH Per Month',
    vAxis: {
      title: 'Avg UPH'
    },
    hAxis: {
      title: 'Needle Type'
    },
    seriesType: 'bars',
    series: {
      3: {
        type: 'line'
      }
    }
  };

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

正如您在上面的代码中看到的，当我尝试使用键 ($needles[$i]) echo 数组 ($uph1, $uph2, $uph3) 值时，它不起作用.我的控制台出现 Uncaught SyntaxError: Unexpected token '<' 错误。我使用了一些静态值而不是使用上面提到的数组，它工作正常。

有人知道我做错了什么吗？

** 编辑 1 **

我在 if($i != ($numberOfItems-1)){ }

之前添加以下 if 条件解决了

if(array_key_exists($needles[$i],$uph1)){
    $uph1Avg = $uph1[$needles[$i]];
}else{
    $uph1Avg = 0;
}

if(array_key_exists($needles[$i],$uph2)){
    $uph2Avg = $uph2[$needles[$i]];
}else{
    $uph2Avg = 0;
}

if(array_key_exists($needles[$i],$uph3)){
    $uph3Avg = $uph3[$needles[$i]];
}else{
    $uph3Avg = 0;
}

问题是由于某些键不存在于键值数组 $uphx 中。因为主要的 if 条件是检查 key 是否存在于 $uphx 数组的任何一个中。因此，如果存在任何一个键，它将进入 if 块。但请记住，某些 $uphx 数组中可能不存在某些键。

Answer 1

您可以将您的数组值放入 javascript 数组，然后将其传递给您的 google 图表。所以，使用下面的代码：

<script>
var arrays = [['Needle', 'One', 'Two', 'Three']] //your intial column..
var dummy = [] //declare this
 <?php
      for($i=0; $i<count($needles); $i++){ ?>
        dummy.push('<?php echo $needles[$i]; ?>',<?php echo (array_key_exists($needles[$i],$uph1)) ? $uph1[$needles[$i]] : 0 ; ?>,<?php echo (array_key_exists($needles[$i],$uph2)) ? $uph2[$needles[$i]] : 0 ; ?>,<?php echo (array_key_exists($needles[$i],$uph3)) ? $uph3[$needles[$i]] : 0 ; ?>)  
        arrays.push(dummy)//push value inside main array
        dummy =[] //clear all value
 <?php }
  ?>
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {

  var data = google.visualization.arrayToDataTable(
    arrays); //pass it here

  var options = {
    title: 'Average UPH Per Month',
    vAxis: {
      title: 'Avg UPH'
    },
    hAxis: {
      title: 'Needle Type'
    },
    seriesType: 'bars',
    series: {
      3: {
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

输出 :

Answer 2

最简单的方法是将您的 php table 传递给 javascript 并在 javascript 中进行处理，然后再使用它来创建您的图表

var needles = <?php echo json_encode($needles); ?>

Google 图表和 php 数组

Google chart and php arrays

html

javascript

php

google-visualization