路由器的流量圖製作

阿新 • • 發佈：2019-02-08

1.繪製svg 向量圖 bandwidth.svg

註釋：繪製流量圖的方法有三種，

1) ：直接將 svg 嵌入的html 頁面中

2 )：通過使用embed/frame 等引用到頁面中去；

<div class="cbi-table">
<embed id="bwsvg" src="/JS/bandwidth.svg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<div style="text-align:right"><small id="scale">2 分鐘繪圖，1 秒重新整理</small></div>
<br />
</div>

3)：在html 頁面中動態的建立

<div class="cbi-table">
<embed id="bwsvg" style="width:100%; height:320px; border:1px solid #000000; background-color:#FFFFFF" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" src="/JS/bandwidth.svg" />
<div style="text-align:right"><small id="scale">2 分鐘繪圖，1 秒重新整理</small></div>
<br />

</div>

}

3.頁面顯示程式碼實現：

4：頁面程式碼的資料處理

}

/*********頁面流量圖資料的重新整理處理********/

}

/* wait for SVG */
window.setTimeout(
function() {
//先獲取頁面元素物件
var svg = document.getElementById('bwsvg');
//獲取SVG 物件
try {
G = svg.getSVGDocument
? svg.getSVGDocument() : svg.contentDocument;
}
catch(e) {
G = document.embeds['bwsvg'].getSVGDocument();
}
if (!G)
{
window.setTimeout(arguments.callee, 1000);
}
else
{
/* find sizes */
width = svg.offsetWidth - 2;
height = svg.offsetHeight - 2;
data_wanted = Math.ceil(width / step);
//初始化data_rx tx
for (var i = 0; i < data_wanted; i++)
{
data_rx[i] = 0;
data_tx[i] = 0;
}
/* find svg elements */
line_rx = G.getElementById('rx');//polyline rx
line_tx = G.getElementById('tx');//polyline tx
label_25 = G.getElementById('label_25');
label_50 = G.getElementById('label_50');
label_75 = G.getElementById('label_75');
label_rx_cur = document.getElementById('rx_bw_cur');
label_rx_avg = document.getElementById('rx_bw_avg');
label_rx_peak = document.getElementById('rx_bw_peak');
label_tx_cur = document.getElementById('tx_bw_cur');
label_tx_avg = document.getElementById('tx_bw_avg');
label_tx_peak = document.getElementById('tx_bw_peak');
label_scale = document.getElementById('scale');
/* plot horizontal time interval lines */
for (var i = step * 60; i < width; i += step * 60)
{
var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', i-5);
line.setAttribute('y1', 0);
line.setAttribute('x2', i-5);
line.setAttribute('y2', '100%');
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
//text.setAttribute('x', i + 5);
text.setAttribute('x', i-5);
text.setAttribute('y', 15);
text.setAttribute('style', 'fill:#999999; font-size:9pt');
text.appendChild(G.createTextNode(Math.round(i / step / 60) + 'min'));
label_25.parentNode.appendChild(line);
label_25.parentNode.appendChild(text);
}
//label_scale.innerHTML = String.format('( %d 分鐘繪圖，%d 秒重新整理)', data_wanted / 60, 1);
/* render datasets, start update interval */
update_graph();
}
}, 1000
);

//]]></script>

頁面的引用xhr.js

/*
* xhr.js - XMLHttpRequest helper class
* (c) 2008-2010 Jo-Philipp Wich
*/

XHR = function()
{

this.reinit = function()
{
if( window.XMLHttpRequest ) {
this._xmlHttp = new XMLHttpRequest();
}
else if( window.ActiveXObject ) {
this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("xhr.js: XMLHttpRequest is not supported by this browser!");
}
}

this.busy = function() {
switch( this._xmlHttp.readyState )
{
case 1:
case 2:
case 3:
return true;

default:
return false;
}
}

this.abort = function() {
if( this.busy() )
this._xmlHttp.abort();
}

this.get = function(url,data,callback)
{
this.reinit();

var xhr = this._xmlHttp;
var code = this._encode( data );

url = location.protocol + '//' + location.hostname +
( location.port ? ':' + location.port : '' ) + url;

if( code )
if( url.substr(url.length-1,1) == '&' )
url += code;
else
url += '?' + code;

xhr.open( 'GET', url, true );

xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 ) {
var json = null;

if( xhr.getResponseHeader("Content-Type") == "application/json" ) {
try {
json = eval('(' + xhr.responseText + ')');
}
catch(e) {
json = null;
}
}
callback( xhr, json );
}
}

xhr.send( null );
}

this.post = function(url,data,callback)
{
this.reinit();

var xhr = this._xmlHttp;
var code = this._encode( data );

xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 )
callback( xhr );
}

xhr.open( 'POST', url, true );
xhr.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
xhr.setRequestHeader( 'Content-length', code.length );
xhr.setRequestHeader( 'Connection', 'close' );
xhr.send( code );
}

this.cancel = function()
{
this._xmlHttp.onreadystatechange = function(){};
this._xmlHttp.abort();
}

this.send_form = function(form,callback,extra_values)
{
var code = '';

for( var i = 0; i < form.elements.length; i++ )
{
var e = form.elements[i];

if( e.options )
{
code += ( code ? '&' : '' ) +
form.elements[i].name + '=' + encodeURIComponent(
e.options[e.selectedIndex].value
);
}
else if( e.length )
{
for( var j = 0; j < e.length; j++ )
if( e[j].name ) {
code += ( code ? '&' : '' ) +
e[j].name + '=' + encodeURIComponent( e[j].value );
}
}
else
{
code += ( code ? '&' : '' ) +
e.name + '=' + encodeURIComponent( e.value );
}
}

if( typeof extra_values == 'object' )
for( var key in extra_values )
code += ( code ? '&' : '' ) +
key + '=' + encodeURIComponent( extra_values[key] );

return(
( form.method == 'get' )
? this.get( form.getAttribute('action'), code, callback )
: this.post( form.getAttribute('action'), code, callback )
);
}

this._encode = function(obj)
{
obj = obj ? obj : { };
obj['_'] = Math.random();

if( typeof obj == 'object' )
{
var code = '';
var self = this;

for( var k in obj )
code += ( code ? '&' : '' ) +
k + '=' + encodeURIComponent( obj[k] );

return code;
}

return obj;
}
}

5.資料獲取的處理函式

/* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#ifndef _BWC_H__
#define _BWC_H__
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <stdint.h>
#include <inttypes.h>
#include <fcntl.h>
#include <time.h>
#include <errno.h>
#include <unistd.h>

#include <sys/stat.h>
#include <sys/mman.h>
#include <arpa/inet.h>
#include <sys/types.h>

#define STEP_COUNT60
#define STEP_TIME1

#define DB_PATH"/var/lib/bwc"
#define DB_IF_FILEDB_PATH "/if/%s"
#define DB_CN_FILEDB_PATH "/connections"
#define DB_LD_FILEDB_PATH "/load"

#define IF_SCAN_PATTERN \
" %[^ :]:%" SCNu64 " %" SCNu64 \
" %*d %*d %*d %*d %*d %*d" \
" %" SCNu64 " %" SCNu64

#define LD_SCAN_PATTERN \
"%f %f %f"
//typedef unsigned long long uint64_t;

struct file_map {
int fd;
int size;
char *mmap;
};

struct traffic_entry {
uint64_t time;
uint64_t rxb;
uint64_t rxp;
uint64_t txb;
uint64_t txp;
};

#endif

檔案bwc.c

#include "bwc.h"
#define ntohll htonll
static uint64_t htonll(uint64_t value)
{
int num = 1;

if (*(char *)&num == 1)
return htonl((uint32_t)(value & 0xFFFFFFFF)) |
htonl((uint32_t)(value >> 32));

return value;
}

static int init_directory(char *path)
{
char *p = path;

for (p = &path[1]; *p; p++)
{
if (*p == '/')
{
*p = 0;

if (mkdir(path, 0700) && (errno != EEXIST))
return -1;

*p = '/';
}
}

return 0;
}

static int init_file(char *path, int esize)
{
int i, file;
char buf[sizeof(struct traffic_entry)] = { 0 };

if (init_directory(path))
return -1;

if ((file = open(path, O_WRONLY | O_CREAT, 0600)) >= 0)
{
for (i = 0; i < STEP_COUNT; i++)
{
if (write(file, buf, esize) < 0)
break;
}

close(file);

return 0;
}

return -1;
}

static int update_file(const char *path, void *entry, int esize)
{
int rv = -1;
int file;
char *map;

if ((file = open(path, O_RDWR)) >= 0)
{
map = mmap(NULL, esize * STEP_COUNT, PROT_READ | PROT_WRITE,
MAP_SHARED | MAP_LOCKED, file, 0);

if ((map != NULL) && (map != MAP_FAILED))
{
memmove(map, map + esize, esize * (STEP_COUNT-1));
//拷貝
memcpy(map + esize * (STEP_COUNT-1), entry, esize);

munmap(map, esize * STEP_COUNT);

rv = 0;
}

close(file);
}

return rv;
}
#if 0
static int mmap_file(const char *path, int esize, struct file_map *m)
{
m->fd = -1;
m->size = -1;
m->mmap = NULL;

if ((m->fd = open(path, O_RDONLY)) >= 0)
{
m->size = STEP_COUNT * esize;
m->mmap = mmap(NULL, m->size, PROT_READ,
MAP_SHARED | MAP_LOCKED, m->fd, 0);

if ((m->mmap != NULL) && (m->mmap != MAP_FAILED))
return 0;
}

return -1;
}

static void umap_file(struct file_map *m)
{
if ((m->mmap != NULL) && (m->mmap != MAP_FAILED))
munmap(m->mmap, m->size);

if (m->fd > -1)
close(m->fd);
}
#endif
/**/
static int update_ifstat(
const char *ifname, uint64_t rxb, uint64_t rxp, uint64_t txb, uint64_t txp
) {
char path[1024];

struct stat s;
struct traffic_entry e;

snprintf(path, sizeof(path), DB_IF_FILE, ifname);

if (stat(path, &s))
{
if (init_file(path, sizeof(struct traffic_entry)))
{
fprintf(stderr, "Failed to init %s: %s\n",
path, strerror(errno));

return -1;
}
}

e.time = htonll(time(NULL));
e.rxb = htonll(rxb);
e.rxp = htonll(rxp);
e.txb = htonll(txb);
e.txp = htonll(txp);

return update_file(path, &e, sizeof(struct traffic_entry));
}

int svg_writedata()
{
FILE *info;
uint64_t rxb, txb, rxp, txp;
uint32_t udp, tcp, other;
float lf1, lf5, lf15;
char line[1024];
char ifname[16];

struct stat s;

if ((info = fopen("/proc/net/dev", "r")) != NULL)
{
while (fgets(line, sizeof(line), info))
{
if (strchr(line, '|'))
continue;

if (sscanf(line, IF_SCAN_PATTERN, ifname, &rxb, &rxp, &txb, &txp))
{

if (strncmp(ifname, "lo", sizeof(ifname)))
update_ifstat(ifname, rxb, rxp, txb, txp);
}
}

fclose(info);
}

}
檔案luci-bwc.c
/*
* luci-bwc - Very simple bandwidth collector cache for LuCI realtime graphs
*
* Copyright (C) 2010 Jo-Philipp Wich <[email protected]>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and

* limitations under the License.

*/

#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <stdint.h>
#include <inttypes.h>
#include <fcntl.h>
#include <time.h>
#include <errno.h>
#include <unistd.h>

#include <sys/stat.h>
#include <sys/mman.h>
#include <arpa/inet.h>

#define STEP_COUNT60
#define STEP_TIME1

#define DB_PATH"/var/lib/bwc"
#define DB_IF_FILEDB_PATH "/if/%s"
#define DB_CN_FILEDB_PATH "/connections"
#define DB_LD_FILEDB_PATH "/load"

#define IF_SCAN_PATTERN \
" %[^ :]:%" SCNu64 " %" SCNu64 \
" %*d %*d %*d %*d %*d %*d" \
" %" SCNu64 " %" SCNu64

#define LD_SCAN_PATTERN \
"%f %f %f"

struct file_map {
int fd;
int size;
char *mmap;
};

struct traffic_entry {
uint64_t time;
uint64_t rxb;
uint64_t rxp;
uint64_t txb;
uint64_t txp;
};

struct conn_entry {
uint64_t time;
uint32_t udp;
uint32_t tcp;
uint32_t other;
};

struct load_entry {
uint64_t time;
uint16_t load1;
uint16_t load5;
uint16_t load15;
};

static uint64_t htonll(uint64_t value)
{
int num = 1;

if (*(char *)&num == 1)
return htonl((uint32_t)(value & 0xFFFFFFFF)) |
htonl((uint32_t)(value >> 32));

return value;
}

#define ntohll htonll

static int init_directory(char *path)
{
char *p = path;

for (p = &path[1]; *p; p++)
{
if (*p == '/')
{
*p = 0;

if (mkdir(path, 0700) && (errno != EEXIST))
return -1;

*p = '/';
}
}

return 0;
}

static int init_file(char *path, int esize)
{
int i, file;
char buf[sizeof(struct traffic_entry)] = { 0 };

if (init_directory(path))
return -1;

if ((file = open(path, O_WRONLY | O_CREAT, 0600)) >= 0)
{
for (i = 0; i < STEP_COUNT; i++)
{
if (write(file, buf, esize) < 0)
break;
}

close(file);

return 0;
}

return -1;
}

static int update_file(const char *path, void *entry, int esize)
{
int rv = -1;
int file;
char *map;

if ((file = open(path, O_RDWR)) >= 0)
{
map = mmap(NULL, esize * STEP_COUNT, PROT_READ | PROT_WRITE,
MAP_SHARED | MAP_LOCKED, file, 0);

if ((map != NULL) && (map != MAP_FAILED))
{
memmove(map, map + esize, esize * (STEP_COUNT-1));
//拷貝
memcpy(map + esize * (STEP_COUNT-1), entry, esize);

munmap(map, esize * STEP_COUNT);

rv = 0;
}

close(file);
}

return rv;
}

static int mmap_file(const char *path, int esize, struct file_map *m)
{
m->fd = -1;
m->size = -1;
m->mmap = NULL;

if ((m->fd = open(path, O_RDONLY)) >= 0)
{
m->size = STEP_COUNT * esize;
m->mmap = mmap(NULL, m->size, PROT_READ,
MAP_SHARED | MAP_LOCKED, m->fd, 0);

if ((m->mmap != NULL) && (m->mmap != MAP_FAILED))
return 0;
}

return -1;
}

static void umap_file(struct file_map *m)
{
if ((m->mmap != NULL) && (m->mmap != MAP_FAILED))
munmap(m->mmap, m->size);

if (m->fd > -1)
close(m->fd);
}

static int update_ifstat(
const char *ifname, uint64_t rxb, uint64_t rxp, uint64_t txb, uint64_t txp
) {
char path[1024];

struct stat s;
struct traffic_entry e;

snprintf(path, sizeof(path), DB_IF_FILE, ifname);

if (stat(path, &s))
{
if (init_file(path, sizeof(struct traffic_entry)))
{
fprintf(stderr, "Failed to init %s: %s\n",
path, strerror(errno));

return -1;
}
}

e.time = htonll(time(NULL));
e.rxb = htonll(rxb);
e.rxp = htonll(rxp);
e.txb = htonll(txb);
e.txp = htonll(txp);

return update_file(path, &e, sizeof(struct traffic_entry));
}

static int update_cnstat(uint32_t udp, uint32_t tcp, uint32_t other)
{
char path[1024];

struct stat s;
struct conn_entry e;

snprintf(path, sizeof(path), DB_CN_FILE);

if (stat(path, &s))
{
if (init_file(path, sizeof(struct conn_entry)))
{
fprintf(stderr, "Failed to init %s: %s\n",
path, strerror(errno));

return -1;
}
}

e.time = htonll(time(NULL));
e.udp = htonl(udp);
e.tcp = htonl(tcp);
e.other = htonl(other);

return update_file(path, &e, sizeof(struct conn_entry));
}

static int update_ldstat(uint16_t load1, uint16_t load5, uint16_t load15)
{
char path[1024];

struct stat s;
struct load_entry e;

snprintf(path, sizeof(path), DB_LD_FILE);

if (stat(path, &s))
{
if (init_file(path, sizeof(struct load_entry)))
{
fprintf(stderr, "Failed to init %s: %s\n",
path, strerror(errno));

return -1;
}
}

e.time = htonll(time(NULL));
e.load1 = htons(load1);
e.load5 = htons(load5);
e.load15 = htons(load15);

return update_file(path, &e, sizeof(struct load_entry));
}

static int run_daemon(int nofork)
{
FILE *info;
uint64_t rxb, txb, rxp, txp;
uint32_t udp, tcp, other;
float lf1, lf5, lf15;
char line[1024];
char ifname[16];

struct stat s;
const char *ipc = stat("/proc/net/nf_conntrack", &s)
? "/proc/net/ip_conntrack" : "/proc/net/nf_conntrack";

if (!nofork)
{
switch (fork())
{
case -1:
perror("fork()");
return -1;

case 0:
if (chdir("/") < 0)
{
perror("chdir()");
exit(1);
}

close(0);
close(1);
close(2);
break;

default:
exit(0);
}
}

/* go */
while (1)
{
if ((info = fopen("/proc/net/dev", "r")) != NULL)
{
while (fgets(line, sizeof(line), info))
{
if (strchr(line, '|'))
continue;

if (sscanf(line, IF_SCAN_PATTERN, ifname, &rxb, &rxp, &txb, &txp))
{

if (strncmp(ifname, "lo", sizeof(ifname)))
update_ifstat(ifname, rxb, rxp, txb, txp);
}
}

fclose(info);
}

if ((info = fopen(ipc, "r")) != NULL)
{
udp = 0;
tcp = 0;
other = 0;

while (fgets(line, sizeof(line), info))
{
if (strstr(line, "TIME_WAIT"))
continue;

if (sscanf(line, "%*s %*d %s", ifname) || sscanf(line, "%s %*d", ifname))
{
if (!strcmp(ifname, "tcp"))
tcp++;
else if (!strcmp(ifname, "udp"))
udp++;
else
other++;
}
}

update_cnstat(udp, tcp, other);

fclose(info);
}

if ((info = fopen("/proc/loadavg", "r")) != NULL)
{
if (fscanf(info, LD_SCAN_PATTERN, &lf1, &lf5, &lf15))
{
update_ldstat((uint16_t)(lf1 * 100),
(uint16_t)(lf5 * 100),
(uint16_t)(lf15 * 100));
}

fclose(info);
}

sleep(STEP_TIME);
}
}

static int run_dump_ifname(const char *ifname)
{
int i;
char path[1024];
struct file_map m;
struct traffic_entry *e;

snprintf(path, sizeof(path), DB_IF_FILE, ifname);

if (mmap_file(path, sizeof(struct traffic_entry), &m))
{
fprintf(stderr, "Failed to open %s: %s\n", path, strerror(errno));
return 1;
}

for (i = 0; i < m.size; i += sizeof(struct traffic_entry))
{
e = (struct traffic_entry *) &m.mmap[i];

if (!e->time)
continue;

printf("[ %" PRIu64 ", %" PRIu64 ", %" PRIu64
", %" PRIu64 ", %" PRIu64 " ]%s\n",
ntohll(e->time),
ntohll(e->rxb), ntohll(e->rxp),
ntohll(e->txb), ntohll(e->txp),
((i + sizeof(struct traffic_entry)) < m.size) ? "," : "");
}

umap_file(&m);

return 0;
}

static int run_dump_conns(void)
{
int i;
char path[1024];
struct file_map m;
struct conn_entry *e;

snprintf(path, sizeof(path), DB_CN_FILE);

if (mmap_file(path, sizeof(struct conn_entry), &m))
{
fprintf(stderr, "Failed to open %s: %s\n", path, strerror(errno));
return 1;
}

for (i = 0; i < m.size; i += sizeof(struct conn_entry))
{
e = (struct conn_entry *) &m.mmap[i];

if (!e->time)
continue;

printf("[ %" PRIu64 ", %u, %u, %u ]%s\n",
ntohll(e->time), ntohl(e->udp),
ntohl(e->tcp), ntohl(e->other),
((i + sizeof(struct conn_entry)) < m.size) ? "," : "");
}

umap_file(&m);

return 0;
}

static int run_dump_load(void)
{
int i;
char path[1024];
struct file_map m;
struct load_entry *e;

snprintf(path, sizeof(path), DB_LD_FILE);

if (mmap_file(path, sizeof(struct load_entry), &m))
{
fprintf(stderr, "Failed to open %s: %s\n", path, strerror(errno));
return 1;
}

for (i = 0; i < m.size; i += sizeof(struct load_entry))
{
e = (struct load_entry *) &m.mmap[i];

if (!e->time)
continue;

printf("[ %" PRIu64 ", %u, %u, %u ]%s\n",
ntohll(e->time),
ntohs(e->load1), ntohs(e->load5), ntohs(e->load15),
((i + sizeof(struct load_entry)) < m.size) ? "," : "");
}

umap_file(&m);

return 0;
}

int main(int argc, char *argv[])
{
int opt;
int daemon = 0;
int nofork = 0;

while ((opt = getopt(argc, argv, "dfi:cl")) > -1)
{
switch (opt)
{
case 'd':
daemon = 1;
break;

case 'f':
nofork = 1;
break;

case 'i':
if (optarg)
return run_dump_ifname(optarg);
break;

case 'c':
return run_dump_conns();

case 'l':
return run_dump_load();

default:
break;
}
}

if (daemon)
return run_daemon(nofork);

else
fprintf(stderr,
"Usage:\n"
"%s -d [-f]\n"
"%s -i ifname\n"
"%s -c\n"
"%s -l\n",
argv[0], argv[0], argv[0], argv[0]
);

return 1;
}

trafiic.cgi 檔案

獲取到的資料：

timerxb(bytes)rxp(packets) txbtxp
[
[ 1525791505, 2713473997, 2076240, 1082240, 5642 ],
[ 1525791506, 2713766199, 2076461, 1082240, 5642 ],
[ 1525791507, 2714048619, 2076674, 1082240, 5642 ],
[ 1525791508, 2714310395, 2076870, 1082240, 5642 ],
[ 1525791509, 2714655101, 2077125, 1082240, 5642 ],
[ 1525791510, 2715002651, 2077384, 1082240, 5642 ],
[ 1525791511, 2715264395, 2077580, 1082240, 5642 ],
[ 1525791512, 2715496235, 2077755, 1082240, 5642 ],
[ 1525791513, 2715728233, 2077930, 1082240, 5642 ],
[ 1525791514, 2716014869, 2078148, 1082240, 5642 ],
[ 1525791515, 2716303733, 2078362, 1082240, 5642 ],
[ 1525791516, 2716549073, 2078545, 1082240, 5642 ],
[ 1525791517, 2716714265, 2078671, 1082240, 5642 ],
[ 1525791518, 2716898467, 2078811, 1082240, 5642 ],
[ 1525791520, 2717081247, 2078949, 1082240, 5642 ],
[ 1525791521, 2717283245, 2079102, 1082240, 5642 ],
[ 1525791522, 2717538151, 2079292, 1082240, 5642 ],
[ 1525791523, 2717835431, 2079515, 1082240, 5642 ],
[ 1525791524, 2718148935, 2079749, 1082240, 5642 ],
[ 1525791525, 2718557715, 2080052, 1082240, 5642 ],
[ 1525791526, 2718854871, 2080274, 1082240, 5642 ],
[ 1525791527, 2719098849, 2080456, 1082240, 5642 ],
[ 1525791528, 2719252995, 2080573, 1082240, 5642 ],
[ 1525791529, 2719416675, 2080697, 1082240, 5642 ],
[ 1525791530, 2719565463, 2080810, 1082240, 5642 ],
[ 1525791531, 2719747209, 2080953, 1082240, 5642 ],
[ 1525791532, 2719929837, 2081089, 1082240, 5642 ],
[ 1525791533, 2720096544, 2081217, 1082240, 5642 ],
[ 1525791534, 2720257560, 2081340, 1082240, 5642 ],
[ 1525791535, 2720417094, 2081460, 1082240, 5642 ],
[ 1525791536, 2720556322, 2081567, 1082240, 5642 ],
[ 1525791537, 2720808532, 2081756, 1082240, 5642 ],
[ 1525791538, 2721011862, 2081911, 1082240, 5642 ],
[ 1525791540, 2721217824, 2082069, 1082240, 5642 ],
[ 1525791541, 2721445610, 2082241, 1082240, 5642 ],
[ 1525791542, 2721581994, 2082351, 1082240, 5642 ],
[ 1525791543, 2721725453, 2082462, 1082240, 5642 ],
[ 1525791544, 2721859109, 2082563, 1082240, 5642 ],
[ 1525791545, 2722011833, 2082678, 1082240, 5642 ],
[ 1525791546, 2722170215, 2082799, 1082240, 5642 ],
[ 1525791547, 2722317551, 2082911, 1082240, 5642 ],
[ 1525791548, 2722475723, 2083030, 1082240, 5642 ],
[ 1525791549, 2722649027, 2083161, 1082240, 5642 ],
[ 1525791550, 2722914857, 2083360, 1082240, 5642 ],
[ 1525791551, 2723114013, 2083511, 1082240, 5642 ],
[ 1525791552, 2723278935, 2083634, 1082240, 5642 ],
[ 1525791553, 2723441253, 2083757, 1082240, 5642 ],
[ 1525791554, 2723588529, 2083868, 1082240, 5642 ],
[ 1525791555, 2723722185, 2083969, 1082240, 5642 ],
[ 1525791556, 2723903721, 2084107, 1082240, 5642 ],
[ 1525791557, 2724194067, 2084324, 1082240, 5642 ],
[ 1525791558, 2724461387, 2084525, 1082240, 5642 ],
[ 1525791560, 2724644511, 2084667, 1082240, 5642 ],
[ 1525791561, 2724845055, 2084818, 1082240, 5642 ],
[ 1525791562, 2725013485, 2084955, 1082240, 5642 ],
[ 1525791563, 2725171809, 2085076, 1082240, 5642 ],
[ 1525791564, 2725428045, 2085267, 1082240, 5642 ],
[ 1525791565, 2725590243, 2085388, 1082240, 5642 ],
[ 1525791566, 2725726743, 2085493, 1082240, 5642 ],
[ 1525791567, 2725879531, 2085609, 1082240, 5642 ]
]

路由器的流量圖製作

路由器的流量圖製作

路由器流量控制機制

百分百原創cacti跨主機跨設備拼接流量圖

zblog2.3版本的asp系統是否可以超越盧松松博客的流量[圖]

MT7621設計的無線路由器原理圖pcb和源代碼

cacti中個別流量圖超過80M不顯示解決辦法

網站效能優化之雪碧圖製作

opencv之gif動圖製作

supermap專題圖製作及釋出服務

IC數字前端設計開發25 (rtl時序圖製作工具)

語音波形，截斷的頻域輸出以及語譜圖製作

Axure學習筆記-輪播圖製作（包括自動輪播及點選）

Axure學習筆記整理2-Banner輪播圖製作（包括自動輪播及手動輪播）

H5Css3動畫背景圖製作幀動畫

使用TexturePacker打包遊戲貼圖製作幀動畫

使用超圖製作室內導航地圖資料

菜雞的ShaderForge3-利用UV貼圖製作卡通風格材質

【轉載】“思維導圖”製作注意問題

使用SVG路徑圖製作線追蹤特效

幾款線上腦圖製作工具

路由器的流量圖製作

相關推薦