使用jQuery和chart.js擷取并展示環境檢測資料

  前面的文章介紹了通過WebAPI擷取環境監測資料，同時也解決了jQuery調用WebAPI時的跨源請求問題，本文在ASP.NET Core mvc項目中使用jQuery調用WebAPI擷取環境檢測資料，并用chart.js繪制圖表。

  mvc項目的建立不在贅述，直接在Index.cshtml中添加對chart.js和jquery的引用，然後添加JavaScript代碼，主要的處理代碼及顯示效果如下。代碼的主要邏輯是根據WebAPI的傳回資料，從中提取煙霧檢測值集合，然後使用chart.js中的折線圖顯示。

<script src="js/chart.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript"> 
        $(showChart).click((function()
        {
            $.getJSON("http://127.0.0.1:5003/api/EMData",function(data){
                    var mqValues = [];
                    var flameValues=[];

                    for(var i=0;i<data.length;i++)
                    {
                        mqValues.push(data[i]["mqvalue"]);
                    }

                    const labels = numbers({count: data.length});
                    const data = {
                    labels: labels,
                    datasets: [
                        {
                            label: '煙霧值',
                            data: mqValues,
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        }
                        ]
                    };
                    
                    var lineChart = new Chart('mqChart', {
                        type: 'line',
                        data: data,
                        }); 
                });               
        }))        
</script>
           

  為顯示多組值，同時提取火焰傳感器的檢測值，然後放在同一圖表中顯示，代碼及顯示效果如下。可以看到，由于煙霧傳感器檢測值和火焰傳感器的檢測值的範圍相差較大，導緻兩條線接近直線（主要是資料庫中的資料變化不大），在同一圖表中顯示的效果一般。

var mqValues = [];
                    var flameValues=[];

                    for(var i=0;i<data.length;i++)
                    {
                        mqValues.push(data[i]["mqvalue"]);
                        flameValues.push(data[i]["flameValue"]);
                    }

                    const labels = numbers({count: data.length});
                    const data = {
                    labels: labelss,
                    datasets: [
                        {
                            label: '煙霧值',
                            data: mqValues,
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        },
                        {
                            label: '火焰值',
                            data: flameValues,
                            fill: false,
                            borderColor: 'rgb(175, 92, 92)',
                            tension: 0.1
                        }
                        ]
                    };
                    
                    var lineChart = new Chart('mqChart', {
                        type: 'line',
                        data: data,
                        }); 
           

  為了提高圖表效果，将兩類資料放在不同的圖表中顯示，代碼與上面的代碼類似，這裡就不貼出來了，效果圖如下所示：

  還得學習改進的地方包括：1）圖表和表格中的資料重複擷取使用，沒有做到資料一次擷取、多出複用；2）圖表沒有并排放。後續還需多學習才行。

參考文獻

[1]jQuery開發從入門到精通

[2]https://chartjs.bootcss.com/docs/