如何仅使用mysql db中的数据在Google饼图图例上显示标签和值

Question

我正在使用Google Charts API来显示饼图，并且我希望图例仅显示标签和值，但我遇到了麻烦，我搜索的大多数答案都包含百分比。 我怎样才能做到这一点？

我的代码如下：

PHP

$table         = array();
$table['cols'] = array(
    //Labels for the chart, these represent the column titles
    array('id' => '', 'label' => 'Country', 'type' => 'string'),
    array('id' => '', 'label' => 'Number of Devices', 'type' => 'number')
); 

$rows = array();
foreach($exec as $row){
    $temp = array();

    //Values
    $temp[] = array('v' => (string) $row['Country']);
    $temp[] = array('v' => (int) $row['Number of Devices']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows; 
$jsonTable = json_encode($table);
echo $jsonTable

JavaScript的

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var PieChart_options = {
      title: 'Number of Devices per country',
      pieSliceText: 'value',
      width: 900, 
      height: 500
    };

 var data = new google.visualization.DataTable(<?=$jsonTable?>);

  var chart = new google.visualization.PieChart(document.getElementById('pie_div'));
  chart.draw(data, PieChart_options);

}

我想创建一个像这样的图 ： 饼图带有图例标签和值

Answer 1

简单地 ，只需像这样格式化来自mysql的数据

 ['Work (11)',     11]

不过，它不会影响您的图表。

Answer 2

一旦'ready'事件触发，便可以修改图表

在绘制图表之前，请务必设置事件监听器

图例标签的显示顺序应与提供的数据相同

以下代码段通过检查属性值来找到图例标签

然后将数据中的值相加...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable({ "cols": [ {"label": "Country", "type": "string"}, {"label": "# of Devices", "type": "number"} ], "rows": [ {"c": [{"v": "Canada"}, {"v": 33}]}, {"c": [{"v": "Mexico"}, {"v": 33}]}, {"c": [{"v": "USA"}, {"v": 34}]} ] }); var container = document.getElementById('chart_div'); var chart = new google.visualization.PieChart(container); google.visualization.events.addListener(chart, 'ready', function () { var rowIndex = 0; Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) { // find legend labels if ((label.getAttribute('text-anchor') === 'start') && (label.getAttribute('fill') !== '#ffffff')) { label.innerHTML += ' (' + data.getValue(rowIndex++, 1) + ')'; } }); }); chart.draw(data, { height: 400, width: 600 }); }, packages:['corechart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>