基于CodeIgniter的Highcharts数据筛选功能异常求助

一、Controller（Chart_issue.php）代码修正 #

需要补充两个核心接口：获取物品列表、获取筛选后的图表数据，同时确保请求能正常响应：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Chart_issue extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Data');
        // 若开启CSRF验证，需允许AJAX请求携带token
        $this->output->set_header('Access-Control-Allow-Origin: *');
    }

    // 页面入口
    public function index() {
        $this->load->view('chart_issue');
    }

    // 获取物品列表接口
    public function get_items() {
        $items = $this->Data->get_all_items();
        echo json_encode($items);
        exit;
    }

    // 获取筛选后的图表数据接口
    public function get_chart_data() {
        $selected_item = $this->input->post('item');
        $chart_data = $this->Data->filter_issue_data($selected_item);
        echo json_encode($chart_data);
        exit;
    }
}

二、Model（Data.php）代码修正 #

确保物品查询和数据筛选逻辑正确，字段名与数据库完全匹配：

<?php
class Data extends CI_Model {

    // 获取所有唯一物品
    public function get_all_items() {
        $this->db->select('DISTINCT item_name'); // 替换为你实际的物品名称字段
        $query = $this->db->get('出库表名'); // 替换为你的出库数据表名
        return $query->result_array();
    }

    // 根据物品筛选出库数据
    public function filter_issue_data($item = '') {
        $this->db->select('issue_date, quantity'); // 替换为实际的日期、数量字段
        if (!empty($item)) {
            $this->db->where('item_name', $item);
        }
        $this->db->order_by('issue_date', 'ASC');
        $query = $this->db->get('出库表名');
        
        // 整理为Highcharts兼容的格式（示例为数量数组，按需调整）
        $result = [];
        foreach ($query->result_array() as $row) {
            $result[] = (int)$row['quantity'];
            // 若需日期+数量的二维数组：$result[] = [strtotime($row['issue_date']) * 1000, (int)$row['quantity']];
        }
        return $result;
    }
}

三、View（chart_issue.php）代码修正 #

修复下拉菜单加载逻辑和筛选事件绑定，确保AJAX请求路径正确：

<!DOCTYPE html>
<html>
<head>
    <title>出库数据图表</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div>
        <label>筛选物品：</label>
        <select id="itemFilter">
            <option value="">全部物品</option>
        </select>
    </div>
    <div id="chartContainer" style="width:800px; height:400px;"></div>

    <script>
        $(document).ready(function() {
            // 初始化图表
            var chart = Highcharts.chart('chartContainer', {
                title: { text: '出库数据统计' },
                xAxis: { type: 'category' }, // 若用日期则改为type: 'datetime'
                series: [{ name: '出库数量', data: [] }]
            });

            // 加载物品列表
            $.ajax({
                url: '<?php echo base_url('chart_issue/get_items'); ?>',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(i, item) {
                        $('#itemFilter').append(`<option value="${item.item_name}">${item.item_name}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('物品列表加载失败：', xhr.responseText);
                }
            });

            // 下拉菜单筛选事件
            $('#itemFilter').change(function() {
                loadChartData($(this).val());
            });

            // 加载/更新图表数据
            function loadChartData(selectedItem) {
                // 若开启CSRF，需携带token
                var csrfData = {
                    '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>',
                    item: selectedItem
                };

                $.ajax({
                    url: '<?php echo base_url('chart_issue/get_chart_data'); ?>',
                    type: 'POST',
                    data: csrfData,
                    dataType: 'json',
                    success: function(data) {
                        chart.series[0].setData(data);
                    },
                    error: function(xhr) {
                        console.error('图表数据加载失败：', xhr.responseText);
                    }
                });
            }

            // 页面加载时初始化全部数据
            loadChartData('');
        });
    </script>
</body>
</html>

关键错误排查点 #

1. CSRF验证问题：若CodeIgniter开启了CSRF，AJAX请求必须携带CSRF token，代码中已添加对应处理
2. URL路径错误：确保config.php中$config['base_url']配置正确，避免AJAX请求404
3. 数据库字段/表名错误：检查Model中使用的表名、字段名与数据库完全一致（区分大小写）
4. AJAX跨域问题：若前后端域名不一致，需在Controller中添加CORS响应头（代码中已添加）

内容的提问来源于stack exchange，提问作者MCIT Trends