使用Chart.js创建图表无响应问题求助（附代码）

尝试使用Chart.js创建折线图表，但图表完全无法生成，无任何反应，控制台也无报错信息（即使使用console.log也无输出），以下是相关代码，恳请协助排查问题：

HTML代码 #

<div class="chart">
  <canvas id="myChart" width="400" height="150"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="./src/js/graph.js"></script>

JS代码 #

function removeElementsByClass(className) {
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0) {
        elements[0].parentNode.removeChild(elements[0]);
    }
}

function draw_graph(graph_data, header) {
    var accepted = [], rejected = [], timestamps = [];

    if(typeof header === 'undefined') header = '';

    for(var timestamp in graph_data) {
        accepted.push(Math.round(graph_data[timestamp]['a']));
        timestamps.push(timestamp);
    }
    Chart.defaults.global.defaultFontFamily = 'Verdana';
    Chart.defaults.global.defaultFontStyle = 'normal';
    Chart.defaults.global.defaultFontColor = '#0B6FAB';
    Chart.defaults.global.defaultFontSize = 11;
    Chart.defaults.global.legend = false;

    removeElementsByClass('chartjs-hidden-iframe'); 

    new Chart(document.getElementById("myChart"), {
        type:'line',
        data: {
            labels: timestamps,
            datasets: [{
                label: "accepted",
                data: accepted,
                borderColor: '#0B6FAB',
                backgroundColor: '#CBFFFF',
                borderWidth: 2,
                fill: false,
                pointRadius: 0
            }]
        },
        options: {
            title: {
                display: true,
                text: header,
                fontSize: 16
            },
            legend: {
                labels: {
                    fontColor: '#C0C0C0'
                }
            },
            scales: {
                yAxes: [{
                    position: 'right',
                    gridLines: {
                        drawBorder: false,
                        display:false
                    },
                    display: false,
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 3,
                        fontStyle: 'bold',
                        fontColor: '#C0C0C0',
                        fontSize: 9,
                        userCallback: function(label, index, labels) {
                            if(label !== 0) {
                                return label;
                            }
                        }
                    },
                    scaleLabel: {},
                    pointLabels: {}
                }],
                xAxes: [{
                    gridLines: {
                        drawBorder: false,
                        display:true
                    },
                    ticks: {
                        beginAtZero: true,
                        autoSkip: true,
                        maxTicksLimit: 6,
                        fontColor: '#C0C0C0',
                        fontSize: 9,
                        maxRotation: 0,
                        minRotation: 0
                    }
                }]
            }
        }
    });
};

核心问题排查点 #

• draw_graph函数未被调用：代码仅定义了函数，但没有传入有效graph_data参数执行它，这是图表无反应的最直接原因。需要在JS文件末尾或HTML中添加调用代码，示例：

  // 模拟测试数据
  const testData = {
    "2024-05-01": {"a": 15},
    "2024-05-02": {"a": 22},
    "2024-05-03": {"a": 18}
  };
  // 调用函数生成图表
  draw_graph(testData, "测试折线图");
  

• 验证graph_data格式：确保传入的数据是可遍历的对象，每个时间戳下包含a字段，否则accepted和timestamps数组为空，图表无内容。
• 移除不必要的iframe操作：chartjs-hidden-iframe是Chart.js 2.x用于交互的内部元素，手动删除可能引发未知问题，建议删除removeElementsByClass('chartjs-hidden-iframe');这行代码。
• 检查JS文件路径：确认./src/js/graph.js的路径与HTML文件的相对位置正确，路径错误会导致JS代码未加载，也会出现无反应无报错的情况。
• 调试验证：在draw_graph函数开头添加console.log('函数已执行', graph_data)，确认函数是否被调用及数据是否正确传入。

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