diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
index b413673..2f218ed 100644
--- a/resource/template/theme-daynight/network.html
+++ b/resource/template/theme-daynight/network.html
@@ -212,37 +212,66 @@
                 parseMonitorInfo(monitorInfo) {
                     let tSeries = [];
                     let tLegendData = [];
+                    var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
+                    let maxPing = 0;
                     for (let i = 0; i < monitorInfo.result.length; i++) {
+                        for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
+                	    avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            if ( avgDelay < MaxTCPPingValue && avgDelay > maxPing) {
+                                maxPing = avgDelay;
+                            }
+                        }
+                    }
+                    for (let i = 0; i < monitorInfo.result.length; i++) {
+                        var lcolor = lcolors[i % lcolors.length];
+                        var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
+                        var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
                         let loss = 0;
                         let data = [];
+                        let datal = [];
                         for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                            avgDelay = monitorInfo.result[i].avg_delay[j];
-                            if (avgDelay > 0.9 * MaxTCPPingValue) {
-                                loss += 1
+                            avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
+                            if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
+                                data.push([monitorInfo.result[i].created_at[j], avgDelay]);
+                            }
+                            else {
+                                loss += 1;
+                                datal.push([monitorInfo.result[i].created_at[j], maxPing]);
                             }
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
                         }
                         lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
-			            legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+                        if (lossRate > 99) {
+                            datal = [];
+                        }
+                        legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
                         tLegendData.push(legendName);
                         tSeries.push({
-                                name: legendName,
-                                type: 'line',
-                                smooth: true,
-                                symbol: 'none',
-                                data: data
+                            name: legendName,
+                            type: 'line',
+                            smooth: true,
+                            symbol: 'none',
+                            data: data,
+                            markPoint: {
+                                data: [
+                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                ]
+                            }
+                        });
+                        tSeries.push({
+                            name: legendName,
+                            type: 'bar',
+                            smooth: true,
+                            symbol: 'none',
+                            data: datal,
+                            itemStyle: { color: rgbaColorBar }
                         });
                     }
                     this.option.title.text = monitorInfo.result[0].server_name;
                     this.option.series = tSeries;
                     this.option.legend.data = tLegendData;
-                    const hour = new Date(Date.now()).getHours()
-                    if (hour > 17 || hour < 4) {
-                        this.option.legend.textStyle.color = "#F1F1F2";
-                        this.option.title.textStyle.color = "#ccc";
-                    }
-                    myChart.clear();
-                    myChart.setOption(this.option);
+                    this.myChart.clear();
+                    this.myChart.setOption(this.option);
                 },
 	        resizeHandle () {
                     this.myChart.resize();