从数据库中读取数据并在Google图表中显示

时间:2018-07-12 07:26:02

标签: php json ajax google-visualization

在这件事上我需要建议,我试图将示例代码(https://developers.google.com/chart/interactive/docs/php_example?csw=1)从饼图转换为Google堆积的条形图

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

function drawMultSeries() {
      var data = google.visualization.arrayToDataTable([
['Genre', 
     /*Agriculture 4*/
     'Agriculture (Plants)',
     'Agriculture (Livestock)',
     'Agriculture (Aquaculture)',
     'Others Agriculture',

     /*Beach 4*/
     'Sandy Beach',
     'Stoney Beach',
     'Buddy Beach',
     'Others Beach',


    /*Shophouses 7*/ 
    'Shophouses (Commercial )',
    'Shophouses (Office)',
    'Shophouses (Commercial &amp; Residential)',
    'Shophouses (Commercial &amp; Office)',
    'Shophouses (Commercial &amp; Residential &amp; Office)',
    'Shophouses (Hotel/Inn/Budget Hotel/Lodging)',
    'Others Shophouses',



     { role: 'annotation' } ],

    ['Agriculture',
    /*Agriculture 4*/10,24,20,32,
    /*Beach 4*/0,0,0,0,
    /*Shophouses 7*/ 0,0,0,0,0,0,0,         
    ''],

    ['Beach',
    /*Agriculture 4*/0,0,0,0,
    /*Beach 4*/10,20,30,40,
    /*Shophouses 7*/ 0,0,0,0,0,0,0,      
    ''],

    ['Shophouses',
    /*Agriculture 4*/0,0,0,0,
    /*Beach 4*/0,0,0,0,
    /*Shophouses 7*/ 10,20,30,20,40,60,20,   
    '']
  ]);

  var options = {
    width: 800,
    height: 400,
    legend: { position: 'bottom', maxLines: 2 },
    bar: { groupWidth: '50%' },
    isStacked: 'percent'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

var data = new google.visualization.DataTable(jsonData);替换为var data = google.visualization.arrayToDataTable();时遇到问题

从示例代码修改后的文件位于the attachment中。

0 个答案:

没有答案