谷歌饼图 php mysql

Posted 2023-02-24

【中文标题】谷歌饼图 php mysql

【英文标题】：Google Pie Chart 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 之前的上层代码

【参考方案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>