使用CanvasJS读取更新的JSON文件绘制实时折线图故障排查

问题概述 #

尝试使用CanvasJS绘制实时折线图，读取由其他程序持续更新的JSON文件中的整数值，但现有代码可运行却无法生成图表。

代码错误分析 #

1. 异步请求时序错误 #

$.getJSON是异步操作，当前代码中chart.render()在请求完成前就执行，此时dataPoints尚未被填充有效数据，导致图表无内容。同时循环内多次发起异步请求，会造成xVal递增与数据推送的顺序混乱。

2. JSON数据解析错误 #

示例JSON结构为[{"NoofProblems":" 20"}]，代码中$.each(data, function(key, value)的value是单个对象（而非数组），使用value[0]会获取到undefined，parseInt(undefined)得到NaN，无效数据无法被图表渲染。

3. 初始化批量请求不合理 #

updateChart(dataLength)会循环40次发起$.getJSON请求，瞬间产生大量并发请求，既影响性能，也无法保证数据返回顺序，导致dataPoints的x轴值与数据对应关系混乱。

修正后的代码 #

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () 
{
    var dataPoints = [];
    var xVal = 0;
    var updateInterval = 1000;
    var dataLength = 40;

    var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text:"Rendering Chart with dataPoints from External JSON"
        },
        data: [{
            type: "line",
            dataPoints : dataPoints,
        }]
    });

    var updateChart = function () 
    {
        // 单次请求获取最新数据，避免并发问题
        $.getJSON("gfgdetails.json", function(data) 
        {  
            // 解析JSON中的正确字段，去除空格后转整数
            var yVal = parseInt(data[0].NoofProblems.trim());
            if (!isNaN(yVal)) {
                dataPoints.push({
                    x: xVal, 
                    y: yVal
                });
                xVal++;

                // 控制数据点数量
                if (dataPoints.length > dataLength) 
                {
                    dataPoints.shift();
                }

                // 确保在数据获取后再渲染图表
                chart.render();
            }
        });
    };

    // 初始化时先获取一次数据
    updateChart();
    // 设置定时更新
    setInterval(updateChart, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

JSON文件说明 #

确保gfgdetails.json内容格式正确，数值部分的空格不影响解析（已通过trim()处理）：

[
{"NoofProblems":" 20"}
]

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