Chart.js无法为Firestore数据集绘制折线图，求解决办法

问题描述 #

已从Firestore获取数据，尝试用Chart.js生成折线图，图表标签和数据点在坐标轴上位置正确，但折线未绘制出来。

当前实现代码 #

JSP 文件代码 #

<div>
    <canvas id="myChart"  style="padding-top: 40px; height: 6px; width: 36px" height="6" width="36"></canvas>   
</div>

JS 文件代码 #

$(document).ready(function(){
    firebase.initializeApp(firebaseConfig);
    var db = firebase.firestore();
    var docRef = db.collection('Users').doc('6158614499').collection('Data').orderBy("Date", "desc");
    var timeOptions = {hourCycle: 'h23', hour: '2-digit', minute:'2-digit'};
    var dateOptions = { day: 'numeric', month: 'numeric' };

    var labelsDateArray = [];
    var dataValuesArray = [];

    docRef.get().then((querySnapshot) => {
      querySnapshot.forEach((doc)=>{
        var one = doc.data();
        
        var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + "~" +  one.Date.toDate().toLocaleTimeString( [],  timeOptions);
        labelsDateArray.push(date);
        var value = one.FacilityCode;
        dataValuesArray.push(value);

        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labelsDateArray,
            datasets: [{
                label: 'Kefa-Firestore-Dataset',
                fill: false,
                showLine: true,
                lineTension: 0.1,
                backgroundColor: "rgba (75, 192, 192,0.4)",
                borderColor: "rgba(139, 0, 0, 1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(139, 0, 0, 0.5)",
                pointBackgroundColor: "red",
                pointBorderWidth: 2,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
                pointHoverBorderColor: "rgba(0, 0, 0, 1)",
                pointHoverBorderWidth: 5,
                pointRadius: 3,
                pointHitRadius: 10,
                data: dataValuesArray,
            }]
        },
        });
    }).catch((error) => {
        console.log("Error getting document:", error);
    });
});

当前效果：折线图仅显示独立数据点，无折线连接。

问题原因及修复方法 #

1. 循环内重复创建Chart实例 #

在querySnapshot.forEach循环中，每遍历一条文档就创建一次Chart实例，导致每次仅渲染单个数据点，后续实例覆盖前一个，无法形成连续折线。

修复：
将Chart实例创建代码移至循环外部，确保所有数据收集完成后仅初始化一次图表：

docRef.get().then((querySnapshot) => {
  // 先遍历所有文档收集数据
  querySnapshot.forEach((doc)=>{
    var one = doc.data();
    var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + "~" +  one.Date.toDate().toLocaleTimeString( [],  timeOptions);
    labelsDateArray.push(date);
    var value = one.FacilityCode;
    dataValuesArray.push(value);
  });
  // 所有数据收集完成后再创建图表
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labelsDateArray,
        datasets: [{
            // 保持原有配置...
            data: dataValuesArray,
        }]
    },
  });
}).catch((error) => {
  console.log("Error getting document:", error);
});

2. Canvas尺寸过小 #

Canvas设置了height:6px; width:36px，尺寸过小导致折线因渲染空间不足无法显示。

修复：
设置合理的Canvas尺寸，或移除固定宽高让Chart.js自动适配：

<div>
    <canvas id="myChart" style="padding-top: 40px; height: 300px; width: 800px;"></canvas>   
</div>

3. 颜色语法错误 #

backgroundColor: "rgba (75, 192, 192,0.4)"中rgba后多了一个空格，会导致颜色解析失败，虽非折线不显示的直接原因，但建议修复：

backgroundColor: "rgba(75, 192, 192, 0.4)",

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