CodeIgniter中如何将控制器数组传递给JavaScript以绘制图表

嘿，我来帮你搞定这个在CodeIgniter里给JavaScript传递图表数据的问题！其实有两种常用的方案，你可以根据自己的场景来选：

这种方法适合页面加载时就需要直接渲染图表的场景，操作起来最简单：

1. 先确保你的控制器把数据传递给了视图，补充一下控制器里的代码：

public function show_chart() {
    $this->load->model('piechart');
    $res['h'] = $this->piechart->piechart();
    // 把数据传给视图
    $this->load->view('chart_view', $res);
}

2. 在对应的视图文件（比如chart_view.php）里，把PHP的数组转成JavaScript能识别的JSON格式，直接赋值给JS变量：

<!-- 先准备好图表的容器 -->
<canvas id="myPieChart"></canvas>

<script>
// 把PHP传递过来的$h数组转成JS可用的对象/数组
const chartData = <?php echo json_encode($h, JSON_UNESCAPED_UNICODE); ?>;

// 这里用你的图表JS代码来使用chartData就行，举个Chart.js的例子：
new Chart(document.getElementById('myPieChart'), {
    type: 'pie',
    data: {
        // 假设你的模型返回的数组每个元素有label和value字段
        labels: chartData.map(item => item.label),
        datasets: [{
            label: '统计数据',
            data: chartData.map(item => item.value),
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    }
});
</script>

小提示：如果你的数据里包含中文，记得加上JSON_UNESCAPED_UNICODE参数，避免中文被转义成Unicode编码。

如果需要动态刷新图表，或者不想把数据直接嵌入页面里，就用这种异步请求的方式：

1. 先在控制器里写一个专门返回JSON数据的方法：

public function get_chart_data() {
    $this->load->model('piechart');
    $chartData = $this->piechart->piechart();
    // 设置响应头为JSON格式
    header('Content-Type: application/json');
    // 输出JSON数据
    echo json_encode($chartData, JSON_UNESCAPED_UNICODE);
    exit; // 确保后面不会输出其他内容
}

2. 在视图里用AJAX请求这个接口获取数据，然后渲染图表：

<canvas id="myPieChart"></canvas>

<script>
// 原生JavaScript版本
fetch('<?php echo base_url('your_controller/get_chart_data'); ?>')
    .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
    })
    .then(data => {
        // 拿到数据后渲染图表
        new Chart(document.getElementById('myPieChart'), {
            type: 'pie',
            data: {
                labels: data.map(item => item.label),
                datasets: [{
                    data: data.map(item => item.value)
                }]
            }
        });
    })
    .catch(error => console.error('获取图表数据出错:', error));

// 如果你项目里用了jQuery，也可以用下面的写法：
// $.ajax({
//     url: '<?php echo base_url('your_controller/get_chart_data'); ?>',
//     type: 'GET',
//     dataType: 'json',
//     success: function(data) {
//         // 渲染图表逻辑
//     },
//     error: function(xhr) {
//         console.error('请求失败:', xhr.responseText);
//     }
// });
</script>

注意：替换your_controller为你实际的控制器名称，确保base_url()能正确生成请求地址（如果没配置base_url，记得先在config.php里设置）。

额外注意事项 #

• 确保你的piechart模型的piechart()方法返回的是结构清晰的数组，比如每个元素包含label（图表标签）和value（对应数值），这样JS处理起来更方便。
• 用json_encode()转数据是最安全的方式，避免手动拼接字符串导致的语法错误或者XSS风险。

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