Как отображать метку и значения только на легенде круговой диаграммы Google с данными из базы данных MySQL

Я использую API Google Charts для отображения круговой диаграммы, и я хочу, чтобы легенда отображала только метку и значения, и я застрял, большинство ответов, которые я искал, включает процент. Как я могу это сделать?

Мой код ниже:

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);

}

Я хочу создать так: круговая диаграмма с меткой и значением на легенде

Источник

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>

Источник

Просто, просто отформатируйте данные из MySQL, как это

 ['Work (11)',     11]

Это не повлияет на ваш график.

Источник
Другие вопросы по тегам