如何僅使用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>