Highcharts 数据过滤器 Conigniter

Highcharts data filter Conigniter

提问人:MCIT Trends 提问时间:8/25/2023 最后编辑:MCIT Trends 更新时间:8/25/2023 访问量:37

问:

我创建了一个highchart来查看MySQL表中发布的数据。然后,我想在图表上逐项过滤那些发布的数据。我使用以下代码来执行此操作:

控制器 (Chart_issue.php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Chart_issue extends CI_Controller {
 
 public function __construct()
 {
 parent::__construct();
 $this->load->model('data'); 
 }
  
 public function index()
 {
$data['item_list'] = $this->data->fetch_item();
 $this->load->view('charts/chart_issue');
 } 
  
 public function data()


    { 
if ($this->input->post('item_id') )
        {
 $data = $this->data->get_issued_data();  
 $category = array();
 $category['name'] = 'Item';
  
 $series1 = array();
 $series1['name'] = 'Issued Qty'; 

 $series2 = array();
 $series2['name'] = 'Date'; 
  
 foreach ($data as $row)
 {
 $category['data'][] = $row->item; 
 $series1['data'][] = $row->issued_qty;
 $series2['data'][] = $row->billed_date;  
 }
  
 $result = array();
 array_push($result,$category);
 array_push($result,$series1, $series2); 
   
 print json_encode($result, JSON_NUMERIC_CHECK);
 }

} }

模型(Data.php)

function get_issued_data($id)
{      
    $this->db->select('sur.update_stock_id, sus.branch_id, sus.request_no, sus.billed_date, store_branch.branch_name AS branch,
    si.item_id, si.item_name AS item,   tf.avqty,   sur.r_qty as r_qty, sur.ap_qty as ap_qty, 
    tf1.issued_qty');
    $this->db->from('store_update_request sur');
    $this->db->join('store_update_stock sus', 'sus.update_stock_id=sur.update_stock_id', 'left');       
    $this->db->join('store_branch', 'sus.branch_id=store_branch.branch_id', 'left');
    $this->db->join('store_item si', 'sur.item=si.item_id', 'left');        
    
    $this->db->join('(select update_stock_id, item, is_qty AS issued_qty 
        from store_update_issue         
        where store_update_issue.status=1 
        ) AS tf1', 
        'si.item_id=tf1.item AND sur.update_stock_id = tf1.update_stock_id','left' );
                
    $this->db->join('(select item, sum(qty)  AS avqty 
        from store_update_stock_details             
        where store_update_stock_details.status=1 
        group by item) AS tf', 'si.item_id=tf.item', 'left');
    $this->db->where(array('sus.status' => 1 , 'store_item.item_id' => $id));
$query = $this->db->get();
    if ($query->num_rows() > 0) {
        return $query->result();
    }
    return false;
}

查看 (chart_issue.php)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                
                
                title: {
                    text: 'Item Issued Summary',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: ['']
                },
                yAxis: [{
                    title: {
                        text: 'Issues'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                
            ],           
            
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b>'+
                            this.x +': '+ this.y;
                    }
                }, 
                
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                plotOptions: {
                 column: {
                dataLabels: {
                    enabled: true
                }
            }
        },

                series: []
            }

            $.getJSON("data", function(json) {
            options.xAxis.categories = json[0]['data'];
            
                options.series[0] = json[1];
                options.series[1] = json[2];                
                
                chart = new Highcharts.Chart(options);
            });
        });

// ]]></script>

<a href="<?= site_url('welcome') ?>"> <input type="button" class="btn btn-warning" value="Back to Home"></a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Item Issued Data</h3>
                        
                    </div>
                    <body>   

                    
                <div class="col-md-3">
                    <select name="item" id="item" class="form-control">
                        <option value="">Select Item</option>
                    <?php
                    foreach($item_list->result_array() as $row)
                    {
                        echo '<option value="'.$row["item_id"].'">'.$row["item_name"].'</option>';
                    }
                    ?>
                    </select>                       
                </div>                   
                
            </div>
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto;"></div>
</body>                  
                    
<script type='text/javascript' src='<?php echo base_url(); ?>assets/js/highcharts.js'></script>
<script type='text/javascript' src='<?php echo base_url(); ?>assets/js/exporting.js'></script>

错误

无法在下拉列表中填充项目列表,并且筛选不起作用。

所需输出

通过下拉列表根据所选项目筛选图表数据。

谁能帮忙?

MySQL CodeIgniter Highcharts

评论

1赞 Michał 8/25/2023
你能准确地指出问题所在吗?在 PHP、mySQL、JavaScript 或特别是 Highcharts 库方面?如果问题出在 JS 配置中,您是否能够通过将 PHP 代码替换为示例数据并在在线编辑器(如 JSFiddle: jsfiddle.net/BlackLabel/sun57geh)中重现错误来简化代码?
0赞 MCIT Trends 8/25/2023
@米哈乌。Highcharts 库工作正常。生成的图表不能根据项目名称进行筛选。发生 JavaScript 错误。
0赞 Michał 9/1/2023
由于您有一个与 JavaScript 密切相关的问题,更具体地说,与 JQuery 有关,因此您最好关闭此主题并提出一个专注于这些问题的问题,而无需 PHP 代码或与问题无关的库,并在在线编辑器中重现它,这样您将更快地得到答案

答: 暂无答案