Question

我想使用谷歌堆积条形图。手动就是这样。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Year', 'A', 'B', 'C', { role: 'annotation' } ],
        ['2011', 2, 1, 1, ''],
        ['2012', 1, 0, 0, ''],
        ['2013', 0, 0, 1, ''],
        ['2014', 1, 1, 1, ''],
        ['2015', 1, 0, 0, '']
  ]);

      var options = {
      bar: { groupWidth: '64%' },
      chartArea: {width:'78%',height:'86%'},
      forceIFrame: 'true',
          isStacked: true,
      legend: {position: 'none'},
          titlePosition: 'none',
      vAxis: {title: 'Technological Fields'}
      };

  var chart = new google.visualization.ColumnChart(document.getElementById('technological-fields'));
  chart.draw(data, options);
}
</script>

但'var data'的值应来自数据库查询后生成的数组。原始数组（来自数据库）如下所示：

$limitedArray = array(
      array('A', 'B', 'G', 'D', 1, 'A', '2011-01-01'),
      array('K', 'L', 'M', 'O', 3, 'C', '2013-03-03'),
      array('K', 'L', 'M', 'O', 3, 'C', '2014-03-03'),
      array('P', 'P', 'S', 'T', 4, 'A', '2011-04-04'),
      array('A', 'B', 'G', 'D', 1, 'A', '2012-01-01'),
      array('E', 'Z', 'H', 'I', 2, 'B', '2011-02-02'),
      array('K', 'L', 'M', 'O', 3, 'C', '2011-03-03'),
      array('P', 'P', 'S', 'T', 4, 'A', '2014-04-04'),
      array('P', 'P', 'S', 'T', 4, 'B', '2014-04-04'),
      array('A', 'B', 'G', 'I', 1, 'A', '2015-05-05')
);

然后我尝试从中获取一些数据：

//CHART 02
$techArea = $limitedArray[$key][5];
$techAreaHeader[] = $techArea;
$prioDate = substr($limitedArray[$key][6],0,4);
$chartContent[] = "$prioDate".","."$techArea";

//Exclude duplicated rows of the header.
$header = array();
foreach ($techAreaHeader as &$value) {
        if (!isset($header[$value['0']]))
        $header[$value['0']] =& $value;
}
//Sort array from high to low.
asort($header);

//Transform array into string.
$strHeader = implode(', ', $header);

我得到以下结果：

$header:
Array
(
    [A] => A
    [B] => B
    [C] => C
)

$strHeader (string):
A, B, C

我可以在'var data'的第一行使用它：

      var data = google.visualization.arrayToDataTable([
        ['Year', <?php echo $strHeader ?>, { role: 'annotation' } ],

我不确定这是否是最好的方法（可能不是），但是当我尝试填充“var data”的其余部分时，我遇到了更大的问题。我尝试了以下，但后来找不到任何解决方案：

//Sort content array.
asort($chartContent);

//Count how many occurrences of a tech area in the same year.
$countedChartContent = array_count_values($chartContent);

$chart02 = implode(', ', array_map(function ($v, $k) { return $k.','.$v; }, $chart02, array_keys($chart02)));

得到以下结果：

$content (sorted):
Array
(
    [3] => 2011,A
    [0] => 2011,A
    [5] => 2011,B
    [6] => 2011,C
    [4] => 2012,A
    [1] => 2013,C
    [7] => 2014,A
    [8] => 2014,B
    [2] => 2014,C
    [9] => 2015,A
)

$countedChartContent:
Array
(
    [2011,A] => 2
    [2011,B] => 1
    [2011,C] => 1
    [2012,A] => 1
    [2013,C] => 1
    [2014,A] => 1
    [2014,B] => 1
    [2014,C] => 1
    [2015,A] => 1
)

呀！我被困了： - 做过研究，但不能再进一步了。任何人都能更好地了解如何从原始数组动态填充这个'var data'？非常感谢提前!!!

Answer 1

构建一个匹配图表所需的预期JSON的PHP数组，然后使用json_encode()将其作为JS对象传递给图表。

自：

var data = google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', { role: 'annotation' } ],
    ['2011', 2, 1, 1, ''],
    ['2012', 1, 0, 0, ''],
    ['2013', 0, 0, 1, ''],
    ['2014', 1, 1, 1, ''],
    ['2015', 1, 0, 0, '']
]);

要：

$array = array(
    array('Year', 'A', 'B', 'C', array('role' => 'annotation')),
    array('2011', 2, 1, 1, ''),
    array('2012', 1, 0, 0, ''),
    array('2013', 0, 0, 1, ''),
    array('2014', 1, 1, 1, ''),
    array('2015', 1, 0, 0, ''),
);

例如。

<?php 
$array = array(
    array('Year', 'A', 'B', 'C', array('role' => 'annotation')),
    array('2011', 2, 1, 1, ''),
    array('2012', 1, 0, 0, ''),
    array('2013', 0, 0, 1, ''),
    array('2014', 1, 1, 1, ''),
    array('2015', 1, 0, 0, ''),
);
?>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = google.visualization.arrayToDataTable(<?php echo json_encode($array); ?>);

        var options = {
            bar: { groupWidth: '64%' },
            chartArea: {width:'78%',height:'86%'},
            forceIFrame: 'true',
            isStacked: true,
            legend: {position: 'none'},
            titlePosition: 'none',
            vAxis: {title: 'Technological Fields'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('technological-fields'));
        chart.draw(data, options);
    }
</script>

<div id="technological-fields"></div>

如何使用PHP从数组动态填充谷歌堆积条形图？

1 个答案: