首页 > 解决方案 > 从数据库中读取数据并在 Google Charts 中显示

问题描述

我需要关于这个问题的建议,我试图将这个示例代码(https://developers.google.com/chart/interactive/docs/php_example?csw=1)从饼图转换为看起来像这样的谷歌堆积条形图

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

示例代码中的修改文件在附件中。

标签: phpjsonajaxgoogle-visualization

解决方案


推荐阅读