Question

我正在尝试使用Google图表制作柱形图。但是会显示注意事项。我从数据库中获取数据。我需要在x中显示dateCreated，在y中显示平均价格。我的代码是：

＆＃13;

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {
  var data = new google.visualization.DataTable();
    data.addColumn("string", "YEAR");
       

        data.addRows([
          <?php echo implode(",", $myurl);?>
          ]);
var options = {
        title: 'Average price',
        hAxis: {
          title: 'Day',
           },
        vAxis: {
          title: 'Average price'
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('column_chart'));

      chart.draw(data, options);
    }

＆＃13;

  <?php  

 foreach ($average_price as $price) {
    $myurl[] = "['".$price->createdDate."', '".$price->unitPrice."']";
}

?>
 <div id="column_chart" ></div>

＆＃13;

我编辑了我的代码。现在这是我的控制器 - 从中我获取图表的json数据：

＆＃13;

public function get_prices() {
     
        $prices = $this->receivedOrders_model->average_price_by_week();
$p = array();
foreach ($prices as $key => $price) {
    $p[$key] = array('c' => array(
        'v' => 'unitPrice', 'f' => null,
    ), array(
        'v' => $price->unitPrice, 'f' => null
    ),
    /* array(
        'v' => 'createdDate', 'f' => null
    ),*/
    array(
        'v' => $price->createdDate, 'f' => null
    ));
}
echo json_encode(array(
    'cols' => array(
       array('id' => 'unitPrice',  'label' => 'Unit Price', 'pattern' => '', 'type' => 'number'),
        array('id' => 'createdDate', 'label' => 'Date of Creation', 'pattern' => '', 'type' => 'date'),

    ),
    'rows' => $p
));
    }

＆＃13;

＆＃13; 我的观点是：

＆＃13;

google.load('visualization', '1', {'packages':['corechart']});
      
    
    google.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "<?= base_url() ?>index.php/receivedOrders/get_prices",
          dataType:"json",
          async: false
          }).responseText;
          
     
      var data = new google.visualization.DataTable(jsonData);
  
     console.log(jsonData)
    
      var chart = new google.visualization.BarChart(document.getElementById('column_chart'));
      chart.draw(data, {width: 400, height: 240});
    }

＆＃13;

但它没有显示为带x和y的坐标系。这是截图。 http://prntscr.com/7emgi3
它看起来应该是这样的： http://www.excel-2010.com/wp-content/uploads/2010/05/stacked-column-in-3d.gif 我对查询get_prices的回复是：

＆＃13;

{"cols":[{"id":"unitPrice","label":"Unit Price","pattern":"","type":"number"},{"id":"createdDate","label":"Date of Creation","pattern":"","type":"date"}],"rows":[{"c":{"v":"unitPrice","f":null},"0":{"v":"0.10000","f":null},"1":{"v":"2015-06-08 10:02:00","f":null}},{"c":{"v":"unitPrice","f":null},"0":{"v":"0.08000","f":null},"1":{"v":"2015-06-08 10:07:00","f":null}},{"c":{"v":"unitPrice","f":null},"0":{"v":"0.07000","f":null},"1":{"v":"2015-06-08 10:10:00","f":null}}]}

＆＃13;

如何使用Google图表创建柱形图

0 个答案: