ラベルと値を表示する方法Googleの円グラフの凡例にmysqlデータベースのデータ

Question

私はGoogleグラフ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); 

} 

私はこの1つのように作成したい： pie chart with label and value on legend

Answer 1

データは

を提供するよう、チャートは

チャートを同じ順序で表示されます

凡例ラベルを描画する前に、イベントリスナーを設定してください'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>

Answer 2

単に、ジャストthis

のようにMySQLからのデータをフォーマット

['Work (11)',  11] 

それははしかしあなたのチャートには影響しません。