WinCC OA-JS-使用plotly.js開發個性化圖表

概覽

接上文

WinCC OA-JS-WebView解析及開發環境搭建

本文為大家帶來plotly.js圖表庫的使用

plotly簡介

plotly.js 是一款基於D3.js二次開發的圖表庫,使用它我們可以輕松的實現各式樣圖表

更多內容 請移步plotly官網 https://plotly.com/javascript/

WinCC OA 集成plotly.js開發

1) 接上文環境搭建中新建的test.html,填入以下代碼

<div style="width:100%;text-align:center;font-size:20px;font-weight:bold;">Hello WinCC OA</div>
<div  id="jquery-version" style="width:100%;text-align:center;font-size:20px;font-weight:bold;"></div>
<div id="tester" style="width:800px;height:600px;"></div>
<script>
//向id 為jquery-version 的div 添加 jQuery 的版本號
$("#jquery-version").append("jQuery version is:"+$.fn.jquery);
//日期/月份個位數 補0
function add0(m){return m<10?'0'+m:m }
//時間戳 轉換時間
function formatTime(tStamp)
{
    let time = new Date(tStamp);
    let y = time.getFullYear();
    let m = time.getMonth()+1;
    let d = time.getDate();
    let h = time.getHours();
    let mm = time.getMinutes();
    let s = time.getSeconds();
    return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
//定義X 軸數據數組
let arrayX=[];
//定義Y 軸數據數組
let arrayY=[];
//使用oaJsApi.dpQuery()方法查詢node001.value01在某一時間段數據
oaJsApi.dpQuery("SELECT '_original.._value', '_original.._stime' FROM 'node001.value01' TIMERANGE(\"2020.06.03 06:00:00\",\"2020.06.03 07:58:51\",1,0)", {
    success: function(data) {
        for(let i=1;i<data.length;i++)
        {
            //將時間數據放入arrayX
            arrayX.push(formatTime(data[i][2]));
            //將值數據放入arrayY
            arrayY.push(data[i][1]);
        }
        //打印測試
        console.log(arrayX,arrayY);
    },
    error: function() {
        console.error(arguments);
    }
});
//定義一個data數據類型放入 arrayX,arrayY
let data = [
    {
        x: arrayX,
        y: arrayY,
        type: 'scatter'
    }
];
//使用jQuery加載plotly.js庫
$.when(
    $.getScript("js/plotly-latest.min.js")
).done(
    function () {
        //調用Plotly 生成圖表
        Plotly.newPlot('tester', data);
    }
)
</script>

2) 保存 調整html.pnl大小並運行

可以看到 成功應用了plotly.js 並輸出WinCC OA數據的圖表

開發要點總結

1)oaJsApi 的相關函數 WinCC OA 手冊里有詳細案例及說明

2)注意開發過程要打開webview ewo的webInspector開關 這樣才能查看調式信息

 

碼上關注,更多精彩