谷歌图表和 PHP / CSV答案

【问题标题】：Google Charts & PHP / CSV谷歌图表和 PHP / CSV
【发布时间】：2018-02-23 21:46:15
【问题描述】：

<script type="text/javascript">

  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['URL', 'total visits'],
<?php foreach ($tag as $key => $value){ ?>['<?php echo $key; ?>', '<?php echo      $value; ?>']<?php echo ", \r\n"; ?><?php } ?>

    ]);

    var options = {
      title: 'Traffic by Page',
      legend: 'none',
      pieSliceText: 'label',
      slices: {  1: {offset: 0.2},
                2: {offset: 0.3},
                3: {offset: 0.4},
                4: {offset: 0.5},
      },
    };

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

这是一个谷歌图表饼图示例。数据来自所有前端页面写入的 csv 文件。然后我将数据排序到一个我称为 $tag 的数组中。并使用 php 我解析，以便他们可以输出正确的格式。

当我从加载的页面查看源代码时，代码中的一切看起来都很完美（对我来说，就像从谷歌下载的图表示例），如下所示：

<script type="text/javascript">

  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['URL', 'total visits'],
['https://www.jason.com/ ', '4'], 
['https://jason.com/ ', '63'], 
['https://jason.com/latitude-longitude-tool/ ', '7'], 
['https://jason.com/login/signup/ ', '1'], 
['https://jason.com/login/ ', '10'], 
['https://jason.com/accounts/contact.php ', '3'], 
['https://jason.com/accounts/myip.php ', '1'], 
['https://jason.com/accounts/domainsearch.php ', '1'], 
['https://jason.com/whois/ ', '1'], 
['https://jason.com/robots.txt ', '2'], 
['https://jason.com/accounts/ ', '5'], 
['https://jason.com/js/main.js ', '1'], 
['https://jason.com/account ', '1'], 

    ]);

    var options = {
      title: 'Traffic by Page',
      legend: 'none',
      pieSliceText: 'label',
      slices: {  1: {offset: 0.2},
                2: {offset: 0.3},
                3: {offset: 0.4},
                4: {offset: 0.5},
      },
    };

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

但这是视觉输出：

enter image description here

请帮忙：

【问题讨论】：

标签： javascript php arrays csv charts

【解决方案1】：

您需要删除值周围的单引号。例如它应该是['https://www.jason.com/ ', 4] 而不是['https://www.jason.com/ ', '4']

更改您的 PHP 以删除输出值点周围的单引号：

['<?php echo $key; ?>', <?php echo $value; ?>]

【讨论】：

【解决方案2】：

<script type="text/javascript">

  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['URL', 'total visits'],
['https://www.jason.com/ ', 4],
['https://jason.com/ ', 63],
['https://jason.com/latitude-longitude-tool/ ', 7],
['https://jason.com/login/signup/ ', 1],
['https://jason.com/login/ ', 10],
['https://jason.com/accounts/contact.php ', 3],
['https://jason.com/accounts/myip.php ', 1],
['https://jason.com/accounts/domainsearch.php ', 1],
['https://jason.com/whois/ ', 1],
['https://jason.com/robots.txt ', 2],
['https://jason.com/accounts/ ', 5],
['https://jason.com/js/main.js ', 1],
['https://jason.com/account ', 1],
    ], false);

    var options = {
      title: 'Traffic by Page',
      legend: 'none',
      pieSliceText: 'label',
      slices: {  1: {offset: 0.2},
                2: {offset: 0.3},
                3: {offset: 0.4},
                4: {offset: 0.5},
      },
    };

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

【讨论】：

感谢您的尝试。艾拉修好了！