var chart; var series = [], myYAxis = []; mySeries = []; var global_history = []; var is_reset_series = false; //是否需要重設數組 $(function () { // myBaja.setSubscribeRealtimeReportDevices([]); myBaja.setRealtimeReportCallBack(ReloadHighCharts) $('#real-time-report-convas-div').empty(); $('#real-time-report-convas-div').append('
'); // Highcharts.Chart("real-time-report", { // lang: { //匯出相關中文名稱配置 // printChart: '列印圖表', // downloadJPEG: '下載JPEG檔案', // downloadPDF: '下載PDF檔案', // downloadPNG: '下載PNG檔案', // downloadSVG: '下載SVG檔案', // downloadCSV: '下載CSV檔案', // downloadXLS: '下載XLS檔案', // viewData: '檢視資料表格', // viewFullscreen: '全屏檢視' // }, // chart: { // renderTo: 'real-time-report', // height: 600, // animation: false // }, // title: { // text: '測試' // }, // xAxis: { // categories: listmonth, // }, // yAxis: [{ // title: { // text: "溫度(℃)" // }, // id: "E", // opposite: true, // showEmpty: false // }], // series: [{ // type: 'spline', // name: "Ramp", // data: listtemperature, // yAxis: "E", // color: "rgb(255, 192, 0)", // zIndex: 4 // }], // }); // Highcharts.setOptions({ // global: { // useUTC: false // } // }); var devices = [{ "device_number": "H_B_B1F_MVCB_MVCBH", "points": [ { "point_name": 'V1', "unit": 'V', }, { "point_name": 'A1', "unit": 'A', }, { "point_name": 'P', "unit": 'W', }] }] ResetHighChartsYAxis(devices); var intervalId = setInterval(function () { myBaja.setSubscribeRealtimeReportDevices(devices) }, 5000); }); /* 未使用 */ function myRealtimeReportData(specify_device_number = []) { console.log("specify_device_number", specify_device_number) if (specify_device_number.length > 0) { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, parseFloat(specify_device_number[0].points["V1"])], true, true); // series.push(specify_device_number[0].points["Ramp"]) // console.log(series); } } //修改Y軸後,重新繪製 function ResetHighChartsYAxis(devices) { var temp_series = []; devices.map(function (item, index) { //判斷數組是否需要存在 mySeries.forEach(function (series_index, series) { series_split = series.name.split(":") if(series_split[0] == item.device_number){ temp_series.push(series) } }) mySeries = temp_series; item.points.map(function (point, point_index) { if (myYAxis.length <= 6 && myYAxis.findIndex(x => x.id == point.unit) < 0) { var yAxis = { title: { text: point.unit, }, id: point.unit, opposite: myYAxis.length > 0 ? true : false, showEmpty: false } myYAxis.push(yAxis); } }) }); is_reset_series = true; InitHighChart(); } function ReloadHighCharts(history) { // console.log("history", history); if (history != undefined && history != null && Object.keys(history).length > 0) { // myXAxis = Object.keys(history); // console.log("原本的排序", Object.keys(history)) // console.log("原本的排序取最後10筆", Object.keys(history).slice(-10)) const ordered = Object.keys(history).sort().reduce( (obj, key) => { obj[key] = history[key]; return obj; }, {} ); global_history = ordered // console.log(ordered) // console.log("調整的排序", Object.keys(ordered)) // console.log("調整的排序取最後10筆", Object.keys(ordered).slice(-10)) Object.keys(ordered).slice(-50).map(function (item, index) { history[item].map(function (item_device) { var temp_series = mySeries.find(x => x.name == (item_device.device_number + ':' + item_device.point)) var temp_timestamp = item.replaceAll("/", "-"); if (temp_series != undefined && temp_series != null) { temp_series.data.push({ x: new Date(temp_timestamp).getTime(), y: parseFloat(item_device.value) }); } else { var series = { type: 'spline', name: item_device.device_number + ':' + item_device.point, data: [], yAxis: item_device.unit, }; series.data.push({ x: new Date(temp_timestamp).getTime(), y: parseFloat(item_device.value) }); mySeries.push(series); } }); }); if (mySeries != undefined && mySeries.length > 0 && is_reset_series) { is_reset_series = false; mySeries.forEach(element => { chart.addSeries(element); }); // InitHighChart(mySeries); } if (mySeries != undefined) { // console.log("mySeries", mySeries); // Highcharts.chart('real-time-report', { // lang: { //匯出相關中文名稱配置 // printChart: '列印圖表', // downloadJPEG: '下載JPEG檔案', // downloadPDF: '下載PDF檔案', // downloadPNG: '下載PNG檔案', // downloadSVG: '下載SVG檔案', // downloadCSV: '下載CSV檔案', // downloadXLS: '下載XLS檔案', // viewData: '檢視資料表格', // viewFullscreen: '全屏檢視' // }, // chart: { // type: 'spline', // }, // title: { // text: 'Live Data' // }, // exporting: { // enabled: false // }, // xAxis: { // categories: myXAxis, // }, // // tooltip: { // // headerFormat: '{series.name}
', // // pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}' // // }, // // yAxis: myYAxis, // series: mySeries // }); } } } function InitHighChart(local_mySeries) { chart = Highcharts.chart('real-time-report', { lang: { //匯出相關中文名稱配置 printChart: '列印圖表', downloadJPEG: '下載JPEG檔案', downloadPDF: '下載PDF檔案', downloadPNG: '下載PNG檔案', downloadSVG: '下載SVG檔案', downloadCSV: '下載CSV檔案', downloadXLS: '下載XLS檔案', viewData: '檢視資料表格', viewFullscreen: '全屏檢視' }, time: { useUTC: false }, chart: { type: 'spline', events: { load: function () { var series = this.series; setInterval(function () { var date = (new Date(new Date().getTime() - 5000)) //-5秒 const formatDate = (date) => { let formatted_date = date.getFullYear() + "/" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "/" + date.getDate() + " " + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()); return formatted_date; } // console.log(formatDate(date)); var timestamp = formatDate(date); console.log(timestamp); console.log(global_history); series.forEach(function (item) { var target_name_split = item.name.split(":"); if (global_history[timestamp] != undefined) { // item var temp_history = global_history[timestamp].find(x => x.device_number == target_name_split[0] && x.point == target_name_split[1]) if (temp_history != undefined && temp_history != null) { item.addPoint([date.getTime(), parseFloat(temp_history.value)], true, true); } } }); }, 1000); } } }, title: { text: 'Live Data' }, exporting: { enabled: false }, xAxis: { type: 'datetime', }, // tooltip: { // headerFormat: '{series.name}
', // pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}' // }, yAxis: myYAxis, series: local_mySeries }); }