如何在CodeIgniter中使用JSON实现动态Chart.js图表？

没问题，我来帮你把静态的Chart.js图表改成用JSON动态数据驱动的！核心思路就是先获取JSON数据，然后提取需要的字段，再把这些动态数据塞到Chart.js的配置里。下面是具体步骤和完整代码：

步骤1：获取并处理JSON数据 #

首先我们需要加载你的data.JSON文件，然后从数组里提取tahun（作为图表标签）和e_nilai（作为图表数据）。注意e_nilai在JSON里是字符串类型，要转成数字才能让Chart.js正确渲染。

步骤2：修改Chart.js初始化代码 #

把原来的静态labels和data替换成从JSON里提取的动态数据，然后再初始化图表。

完整的实现代码 #

ChartJs.prototype.init = function() {
    // 1. 用fetch获取JSON数据
    fetch('data.JSON')
        .then(response => response.json())
        .then(jsonData => {
            // 2. 提取需要的字段：tahun作为labels，e_nilai转成数字作为data
            const labels = jsonData.map(item => item.tahun);
            const nilaiData = jsonData.map(item => parseInt(item.e_nilai));

            // 3. 定义图表配置，用动态数据替换静态内容
            var lineChart = {
                labels: labels,
                datasets: [{
                    label: "Nilai Ekspor ($)",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "#5d9cec",
                    borderColor: "#5d9cec",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "#5d9cec",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 5,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "#5d9cec",
                    pointHoverBorderColor: "#eef0f2",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: nilaiData
                }]
            };

            var lineOpts = {
                scales: {
                    yAxes: [{
                        ticks: {
                            // 这里改成根据动态数据自动计算范围，适配实际数值
                            max: Math.max(...nilaiData) + 100000000, // 加缓冲避免顶到图表边缘
                            min: Math.min(...nilaiData) - 100000000,
                            stepSize: 200000000
                        }
                    }]
                }
            };

            // 4. 初始化图表
            this.respChart($("#lineChartExport"), 'Line', lineChart, lineOpts);
        })
        .catch(error => {
            console.error('加载JSON数据出错:', error);
        });
};

额外说明 #

• 如果你的项目需要兼容旧浏览器，也可以用jQuery.ajax或者axios替代fetch，核心逻辑都是：获取数据→提取字段→渲染图表。
• 我把y轴的刻度范围改成了根据动态数据自动计算，这样图表会更贴合你的实际数值；如果你还是想用固定范围，直接改回原来的max:100, min:20就行。
• 一定要确认data.JSON的文件路径和当前JS文件的相对路径是正确的，不然会出现加载失败的情况。

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