谷歌饼图 php mysql答案

【问题标题】：Google Pie Chart php mysql谷歌饼图 php mysql
【发布时间】：2018-05-11 11:35:57
【问题描述】：

我使用 PHP MySQL 使用 Google 饼图。如果我把鼠标放在图表它只显示行中的 2 列数据。但是有三个该表中的列&我想显示该行中的所有列。一世已编写此代码以显示第 3 列，但它不起作用。

var data = google.visualization.arrayToDataTable([
            ['Problems', 'Sufferer', 'Solutions'],

            <?php

            while($row = $res->fetch_assoc()){
                echo "['".$row['Problems']."',".$row['sum(Sufferer)'].", '".$row['Solutions']."'],";
            }

            ?>

        ]);

我该如何解决这个问题？ picture of my Pie Chart output example

【问题讨论】：

你已经标记了 mysql 和 mysqli .. 你实际使用的是哪个？
分享 var data = google.visualization.arrayToDataTable 之前的上层代码

标签： php mysql google-visualization chart.js

【解决方案1】：

谷歌饼图只支持2列参考Google Pie Chart

第一个是切片标签，第二个是切片值。

如果您希望向图表添加更多信息，可以使用悬停时显示的工具提示。

有关列和角色的更多信息，请参阅Column Roles

默认情况下，只有切片标签和带百分比的切片值会显示在图表的工具提示中。

这可以通过传递以下格式的数据来定制

数据格式

    var data = google.visualization.arrayToDataTable([
      ['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
      ['Pepperoni', 33, "Most popular"],
    ]);

如果您希望自定义工具提示的呈现，可以通过传递 HTML 数据作为工具提示的内容来实现。

有关工具提示和自定义 HTML 内容的更多信息，请参阅 Tooltips

示例

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
    ['Pepperoni', 33, "Most popular"],
    ['Hawaiian', 26, "Popular"],
    ['Mushroom', 22, "Somewhat popular"],
    ['Sausage', 10, "Less popular"]
  ]);
  
  var options = {
    title: 'Pizza Popularity'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

【讨论】：