分析数据

本文介绍了一种使用HTML5 Canvas进行数据可视化的实现方法,并通过具体的示例代码展示了如何绘制条形图并进行简单的数据分析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分析数据

begin.......................
001,001,001,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,242,009,004,001,001,001,001,001,006,001,001,001,001,001,005,002,001,002,005,001,001,002,006,003,001,001,005,001,
end.........................
begin.......................
006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,001,001,042,008,007,001,001,001,006,001,001,001,
end.........................
begin.......................
009,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,
end.........................
begin.......................
004,005,005,002,001,001,006,005,006,001,001,001,042,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,
end.........................
begin.......................
011,009,004,001,001,001,006,001,001,001,006,005,005,002,001,001,006,005,006,001,001,001,042,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,
end.........................
begin.......................
004,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,001,001,006,001,001,001,006,005,005,002,001,001,006,005,006,001,001,001,042,008,007,001,001,001,001,001,006,001,001,001,
end.........................
begin.......................
006,009,007,001,001,001,001,001,006,001,001,001,001,001,006,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,001,001,006,001,001,001,006,005,005,002,001,001,006,005,006,001,
end.........................
begin.......................
005,004,006,001,001,001,001,001,005,005,005,001,001,001,001,001,039,009,009,001,001,001,006,001,001,001,001,001,006,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,001,001,
end.........................
begin.......................
020,009,004,001,001,001,006,001,001,001,001,001,005,004,006,001,001,001,001,001,005,005,005,001,001,001,001,001,039,009,007,001,001,001,001,001,006,001,001,001,001,001,006,002,001,001,005,002,001,002,
end.........................
begin.......................
002,001,001,001,001,001,006,001,001,002,005,002,001,002,005,001,001,003,006,002,001,001,006,001,037,009,004,001,001,001,006,001,001,001,001,001,005,004,006,001,001,001,001,001,005,005,005,001,001,001,
end.........................
begin.......................
004,003,001,001,006,001,001,002,006,003,001,001,005,001,001,001,001,001,037,009,009,001,001,001,001,001,006,001,001,002,006,001,001,002,007,004,005,002,001,001,006,001,037,009,004,001,001,001,006,001,
end.........................
begin.......................
013,009,004,001,001,001,001,001,006,001,001,001,006,003,001,002,005,001,001,002,006,003,001,001,005,001,001,001,001,001,037,009,009,001,001,001,001,001,006,001,001,003,005,001,001,002,007,004,005,002,
end.........................
begin.......................
004,001,001,004,006,002,001,001,005,005,005,001,001,001,001,001,042,009,004,001,001,001,001,001,006,001,001,001,001,001,005,002,001,002,005,001,001,002,006,003,001,001,005,001,001,001,001,001,037,009,
end.........................
begin.......................
027,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,001,001,042,008,007,001,001,001,006,001,001,001,001,001,005,002,001,002,005,001,001,002,006,003,001,001,005,001,
end.........................
begin.......................
006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,001,001,042,008,007,001,001,001,006,001,001,001,
end.........................
begin.......................
008,009,007,001,001,001,001,001,006,001,001,001,006,001,001,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,005,005,002,001,001,006,005,006,001,
end.........................
begin.......................
004,005,006,001,001,001,001,001,005,005,005,001,001,001,001,001,039,009,007,001,001,001,001,001,006,001,001,001,001,001,006,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,
end.........................
begin.......................
022,009,004,001,001,001,006,001,001,001,001,001,005,004,006,001,001,001,001,001,005,005,005,001,001,001,001,001,039,009,007,001,001,001,001,001,006,001,001,001,001,001,006,002,001,001,005,002,001,002,
end.........................
begin.......................
002,001,001,001,001,001,006,001,001,002,005,002,001,002,005,001,001,003,006,002,001,001,006,001,037,009,004,001,001,001,006,001,001,001,001,001,005,004,006,001,001,001,001,002,004,005,005,001,001,001,
end.........................
begin.......................
004,003,001,001,001,005,001,001,002,006,003,001,001,005,001,001,001,001,001,037,009,009,001,001,001,001,001,006,001,001,002,005,002,001,002,007,004,005,002,001,001,006,001,037,009,004,001,001,001,006,
end.........................
begin.......................
001,013,009,004,001,001,001,001,001,006,001,001,001,006,003,001,002,005,001,001,002,006,003,001,001,005,001,001,001,001,001,037,009,009,001,001,001,001,001,006,001,001,003,004,001,001,001,002,007,004,
end.........................
begin.......................
002,001,001,001,001,001,004,001,001,004,006,002,001,001,005,005,005,001,001,001,001,001,042,009,004,001,001,001,001,001,006,001,001,001,001,001,005,002,001,002,005,001,001,002,006,003,001,001,005,001,
end.........................
begin.......................
006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,001,001,042,009,006,001,001,001,006,001,001,001,
end.........................
begin.......................
009,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,006,004,006,002,001,001,005,005,005,001,001,001,
end.........................
begin.......................
004,005,005,002,001,001,006,005,006,001,001,001,042,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,037,009,004,001,006,001,001,001,001,001,
end.........................
begin.......................
011,009,004,001,001,001,006,001,001,001,006,005,005,002,001,001,006,005,006,001,001,001,042,008,007,001,001,001,001,001,006,001,001,001,006,001,001,002,007,002,001,001,005,002,001,002,006,001,001,001,
end.........................
begin.......................
004,002,001,001,005,002,001,002,005,001,001,002,006,001,001,001,037,009,004,001,001,001,006,001,001,001,006,005,005,002,001,001,006,005,006,001,001,001,041,009,007,001,001,001,001,001,006,001,001,001,
end.........................
        while(1)
        {
            delay_ms(1);
            count++;
            if(flag != IN){
                buf[index++] = count;
                count = 0;
                flag = IN;
            }
            if(index == 50){
                uart_printf("begin.......................\r\n");
                for(index = 0; index < 50; index++){
                    uchar tem = buf[index];
                    uchar b[4];
                    b[0] = tem / 100 + 48;
                    b[1] = (tem / 10) % 10 +48;
                    b[2] = tem % 10 +48;
                    b[3] = ',';
                    uart_printf_num(b, 4);


                }
                index = 0;
                uart_printf("\r\nend.........................\r\n");
            }

        }
begin.......................
068,017,056,167,029,086,095,067,100,077,092,072,108,058,109,067,101,068,111,052,115,062,034,056,028,066,029,067,030,053,113,064,033,052,113,066,031,053,114,066,102,065,030,066,102,064,031,065,032,053,
end.........................
begin.......................
233,066,102,066,114,052,114,064,103,067,113,052,114,068,029,054,029,070,027,064,032,053,113,065,031,052,115,065,031,054,112,066,102,066,029,068,101,066,029,065,032,055,028,064,032,066,030,055,029,067,
end.........................
begin.......................
238,052,115,065,103,066,113,052,114,065,032,053,031,067,028,067,030,052,114,065,032,055,111,065,032,054,112,064,103,069,027,066,102,066,029,068,029,052,032,068,027,066,031,053,030,067,113,052,031,066,
end.........................
begin.......................
001,211,102,067,113,052,114,065,032,053,030,065,031,064,033,053,113,065,032,053,112,065,032,053,113,065,103,068,028,066,102,065,031,064,032,053,031,067,028,066,031,051,032,066,114,052,031,067,112,052,
end.........................
begin.......................
001,215,113,053,113,066,031,052,031,069,027,065,031,054,112,067,030,053,113,069,028,052,114,067,101,065,030,066,102,067,029,063,034,053,030,068,028,063,033,052,031,065,114,054,030,068,111,055,112,066,
end.........................
begin.......................
001,202,114,064,032,056,028,067,028,066,031,055,112,065,031,052,114,065,032,054,112,064,104,067,028,065,103,066,030,065,032,052,031,067,029,066,030,051,033,064,115,052,031,069,111,053,113,064,104,067,
end.........................
begin.......................
001,212,029,054,030,066,029,066,031,052,114,065,032,052,114,066,030,056,111,065,103,064,031,066,102,067,029,066,030,054,030,066,029,067,030,053,032,061,116,054,030,066,113,055,112,068,100,067,112,053,
end.........................
begin.......................
001,216,026,068,029,052,114,064,033,052,113,068,029,052,115,063,104,068,028,066,102,068,028,066,030,054,030,065,030,066,030,053,031,067,112,052,032,062,117,052,114,064,103,070,110,055,085,118,050,062,
end.........................
begin.......................
204,116,051,060,118,050,116,065,102,066,114,050,116,064,104,067,112,054,112,067,030,054,030,067,028,065,032,053,113,063,033,054,112,067,030,052,114,066,102,067,029,065,103,065,030,065,032,053,030,066,
end.........................
begin.......................
001,212,101,067,113,054,112,067,101,065,114,054,112,067,030,051,033,066,029,062,035,052,113,066,032,053,113,062,034,055,111,062,106,067,029,065,102,065,031,065,031,053,031,065,030,065,032,051,032,066,
end.........................
begin.......................
236,055,111,066,102,066,114,052,114,065,032,052,031,068,028,064,032,054,112,065,032,052,115,066,030,056,110,067,101,066,030,067,101,065,031,065,031,053,030,067,029,067,030,051,033,064,114,052,032,068,
end.........................
begin.......................
001,217,100,070,110,055,111,064,033,052,031,065,031,065,031,049,118,065,031,054,112,063,034,053,113,066,102,068,027,069,099,067,029,067,030,054,029,066,030,065,031,054,030,066,114,050,033,063,116,052,
end.........................
begin.......................
001,218,113,052,114,066,031,053,030,066,030,065,031,053,113,066,031,054,112,065,032,052,114,065,103,066,030,066,101,064,032,065,031,054,030,066,029,065,032,056,028,063,116,052,031,066,114,050,116,065,
end.........................
begin.......................
001,203,111,067,030,054,030,067,028,065,031,054,113,064,032,052,114,065,032,055,111,065,103,066,029,064,104,065,031,065,031,052,031,068,028,065,032,052,031,065,114,054,030,066,113,053,113,065,103,066,
end.........................
begin.......................
001,209,031,054,030,066,029,066,031,054,112,063,034,054,112,064,032,053,113,066,102,068,028,067,101,067,029,066,031,055,028,065,030,063,034,053,030,067,112,055,029,065,114,052,114,066,102,067,112,054,
end.........................
begin.......................
001,216,026,065,032,051,115,068,028,054,112,068,029,054,112,065,103,063,033,067,101,064,031,063,033,054,030,067,028,065,032,054,029,069,111,053,030,066,114,054,112,066,102,065,114,055,085,118,047,066,
end.........................
begin.......................
202,117,048,064,115,051,115,066,101,068,112,052,114,066,102,063,116,054,112,067,030,054,029,066,029,067,030,052,114,065,032,051,115,065,031,052,114,065,103,066,030,065,102,065,031,065,032,054,029,067,
end.........................
begin.......................
001,209,100,069,111,052,114,065,103,067,112,055,111,067,030,055,028,068,028,068,029,050,115,067,031,052,113,068,029,054,112,066,102,066,029,066,103,065,030,067,030,053,030,066,030,065,031,055,029,065,
end.........................
begin.......................
233,056,110,067,101,068,112,054,112,063,033,053,030,069,027,064,033,053,113,067,030,054,112,064,032,054,112,065,103,066,029,064,103,068,028,065,031,054,030,064,031,063,034,052,031,065,114,051,032,065,
end.........................
begin.......................
001,213,101,068,112,052,114,065,032,052,031,068,027,068,029,053,113,064,032,051,115,064,033,052,113,065,103,067,029,064,103,067,029,067,029,052,032,063,032,067,030,051,032,065,114,050,033,065,114,054,
end.........................
begin.......................
001,205,111,054,112,066,031,053,030,065,031,066,030,049,117,063,033,054,112,065,032,050,116,066,101,066,030,067,100,067,029,064,032,052,032,065,030,067,029,052,032,064,115,051,032,066,113,054,112,065,
end.........................
begin.......................
001,198,112,066,031,052,031,065,031,067,029,053,113,066,031,051,115,063,033,052,114,065,103,065,030,068,100,067,029,065,031,052,031,069,027,064,033,053,030,064,115,053,030,067,113,052,113,065,103,067,
end.........................
begin.......................
001,209,032,052,031,065,030,066,031,052,114,065,031,054,113,064,032,054,112,067,101,067,029,067,100,067,029,065,031,053,031,069,026,066,031,053,030,066,113,053,031,066,113,054,112,065,103,064,115,054,
end.........................
begin.......................
001,207,030,065,031,055,111,064,033,052,113,065,032,054,112,064,103,066,030,065,103,065,030,066,031,053,030,065,031,064,032,053,031,066,113,051,032,064,115,053,113,068,100,067,112,053,087,115,050,065,
end.........................
begin.......................
197,114,051,065,114,052,114,065,103,067,112,053,113,066,102,067,112,055,111,066,031,054,029,064,031,066,031,053,113,064,032,053,114,066,031,052,113,065,102,066,030,066,102,066,030,065,031,054,029,067,
end.........................
begin.......................
001,210,104,066,113,054,113,064,104,064,115,053,113,064,033,053,030,067,028,066,031,050,116,066,031,053,113,065,031,054,112,065,103,066,029,069,099,064,032,066,030,053,030,065,031,063,033,052,031,065,
end.........................
begin.......................
235,054,112,067,101,064,115,054,112,067,030,053,030,066,029,067,030,055,111,065,032,054,112,066,031,054,111,066,103,067,028,066,102,066,030,066,030,053,031,067,028,063,034,053,030,065,114,052,032,065,
end.........................
begin.......................
001,209,104,065,114,054,112,066,031,053,031,064,031,065,031,054,112,065,032,054,112,067,030,053,113,067,101,067,028,065,103,067,029,065,032,051,031,067,029,063,034,054,029,067,112,054,030,065,114,055,
end.........................
begin.......................
001,214,112,055,111,065,032,053,030,066,030,064,032,054,112,067,030,054,112,064,032,056,111,064,104,064,032,065,102,066,029,066,031,052,032,063,032,065,032,051,032,065,114,055,028,067,112,052,114,065,
end.........................
begin.......................
001,198,112,065,031,054,029,067,029,062,035,052,113,065,032,054,112,065,031,056,111,064,103,065,031,063,104,066,030,066,030,053,031,065,030,063,033,053,031,066,113,052,031,067,112,053,113,066,102,067,
end.........................
begin.......................
001,208,030,055,029,066,029,066,031,053,113,066,030,055,111,067,030,050,116,065,103,065,030,065,103,066,029,066,031,052,031,066,029,064,033,053,030,066,113,051,033,064,115,054,112,064,104,067,112,051,
end.........................
begin.......................
001,215,029,066,031,055,111,067,030,055,111,065,031,052,114,067,100,068,029,065,102,065,030,064,033,052,031,066,030,066,030,053,031,064,115,052,031,068,111,053,113,066,102,066,114,052,088,117,048,067,
end.........................
begin.......................
193,116,049,064,115,051,115,067,101,066,113,052,114,065,103,067,113,052,113,068,029,052,032,067,028,068,029,051,115,064,032,054,112,063,034,053,113,065,103,067,028,068,100,068,028,066,030,056,028,066,
end.........................
begin.......................
001,205,105,065,114,053,113,066,102,066,113,056,110,069,028,056,028,067,028,065,032,051,115,066,031,053,112,065,032,054,112,065,103,069,026,066,102,065,030,067,030,052,031,068,028,063,033,052,031,067,
end.........................
begin.......................
236,054,111,065,103,065,114,052,114,066,031,053,030,067,029,063,033,053,113,064,033,053,112,065,032,054,112,063,104,065,031,067,101,067,028,063,034,051,032,067,029,065,031,053,030,064,115,051,033,066,
end.........................
begin.......................
001,205,102,066,113,052,114,066,031,054,029,066,029,067,030,054,112,066,030,054,112,065,032,052,114,067,101,069,027,065,103,065,030,065,032,051,032,065,030,066,030,053,031,064,115,052,032,063,115,053,
end.........................
begin.......................
001,206,112,054,112,065,031,053,031,066,029,064,033,049,116,066,031,054,111,066,031,052,114,065,103,066,029,064,104,067,029,063,033,053,030,064,031,067,030,050,033,067,112,053,031,065,114,052,114,061,
end.........................
begin.......................
001,203,114,065,031,053,031,067,028,067,030,052,114,064,032,054,112,062,035,053,113,065,102,068,029,066,101,065,030,065,032,053,030,063,032,065,032,051,033,066,112,052,031,064,115,055,112,066,101,066,
end.........................
begin.......................
001,207,030,054,029,065,031,068,028,054,112,066,031,053,113,062,034,051,115,065,103,068,027,064,104,065,030,068,029,049,034,066,029,064,033,049,034,066,113,051,032,067,112,053,113,067,101,066,113,055,
end.........................
begin.......................
001,201,031,064,032,053,113,063,033,055,111,065,032,053,112,067,101,068,027,066,102,065,030,066,031,053,030,066,029,067,030,052,032,067,111,054,030,064,114,054,112,068,100,066,113,056,081,112,051,063,
end.........................
begin.......................
196,120,044,062,117,047,119,064,103,068,112,052,114,064,103,068,112,055,111,062,034,054,030,066,029,066,031,051,114,066,031,054,112,065,031,054,112,068,100,066,030,063,105,065,030,065,031,054,030,066,
end.........................
begin.......................
001,203,104,066,114,051,115,064,103,067,112,054,113,065,031,052,031,068,028,068,029,052,113,064,033,053,112,065,032,052,114,066,102,065,030,066,102,065,030,067,029,054,030,063,032,061,035,055,029,063,
end.........................
begin.......................
232,056,110,066,102,068,111,052,113,065,032,054,029,065,031,064,032,051,115,064,032,054,112,064,032,052,114,064,104,066,029,063,105,065,030,063,034,051,031,067,029,066,031,052,031,067,111,053,030,066,
end.........................

画图

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CanvasAnalysis</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #808080;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            margin: 0px;
        }
    </style>
    <script>
       String.prototype.format = function() {
            var args = arguments;
            return this.replace(/{(\d+)}/g, function(match, number) {
                return typeof args[number] != 'undefined' ? args[number] : match;
            });
        };
    </script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas;
        var ctx;
        var SCREEN_WIDTH;
        var SCREEN_HEIGHT;

        var lineWidth = 4;      // 线宽
        var lineSpace = 1;      // 线间距
        var zoom = 4;           // 垂直缩放
        var showGrid = false;   // 显示网格

        var canvasZoom = 5;

        var textSize = 14;

        var padding = 50;       // padding

        var arr = [];

        initData();
        init();
        draw();


        function initData(){
            var data = "068,017,056,167,029,086,095,067,100,077,092,072,108,058,109,067,101,068,111,052,115,062,034,056,028,066,029,067,030,053,113,064,033,052,113,066,031,053,114,066,102,065,030,066,102,064,031,065,032,053,233,066,102,066,114,052,114,064,103,067,113,052,114,068,029,054,029,070,027,064,032,053,113,065,031,052,115,065,031,054,112,066,102,066,029,068,101,066,029,065,032,055,028,064,032,066,030,055,029,067,238,052,115,065,103,066,113,052,114,065,032,053,031,067,028,067,030,052,114,065,032,055,111,065,032,054,112,064,103,069,027,066,102,066,029,068,029,052,032,068,027,066,031,053,030,067,113,052,031,066,001,211,102,067,113,052,114,065,032,053,030,065,031,064,033,053,113,065,032,053,112,065,032,053,113,065,103,068,028,066,102,065,031,064,032,053,031,067,028,066,031,051,032,066,114,052,031,067,112,052,001,215,113,053,113,066,031,052,031,069,027,065,031,054,112,067,030,053,113,069,028,052,114,067,101,065,030,066,102,067,029,063,034,053,030,068,028,063,033,052,031,065,114,054,030,068,111,055,112,066,001,202,114,064,032,056,028,067,028,066,031,055,112,065,031,052,114,065,032,054,112,064,104,067,028,065,103,066,030,065,032,052,031,067,029,066,030,051,033,064,115,052,031,069,111,053,113,064,104,067,001,212,029,054,030,066,029,066,031,052,114,065,032,052,114,066,030,056,111,065,103,064,031,066,102,067,029,066,030,054,030,066,029,067,030,053,032,061,116,054,030,066,113,055,112,068,100,067,112,053,001,216,026,068,029,052,114,064,033,052,113,068,029,052,115,063,104,068,028,066,102,068,028,066,030,054,030,065,030,066,030,053,031,067,112,052,032,062,117,052,114,064,103,070,110,055,085,118,050,062,204,116,051,060,118,050,116,065,102,066,114,050,116,064,104,067,112,054,112,067,030,054,030,067,028,065,032,053,113,063,033,054,112,067,030,052,114,066,102,067,029,065,103,065,030,065,032,053,030,066,001,212,101,067,113,054,112,067,101,065,114,054,112,067,030,051,033,066,029,062,035,052,113,066,032,053,113,062,034,055,111,062,106,067,029,065,102,065,031,065,031,053,031,065,030,065,032,051,032,066,236,055,111,066,102,066,114,052,114,065,032,052,031,068,028,064,032,054,112,065,032,052,115,066,030,056,110,067,101,066,030,067,101,065,031,065,031,053,030,067,029,067,030,051,033,064,114,052,032,068,001,217,100,070,110,055,111,064,033,052,031,065,031,065,031,049,118,065,031,054,112,063,034,053,113,066,102,068,027,069,099,067,029,067,030,054,029,066,030,065,031,054,030,066,114,050,033,063,116,052,001,218,113,052,114,066,031,053,030,066,030,065,031,053,113,066,031,054,112,065,032,052,114,065,103,066,030,066,101,064,032,065,031,054,030,066,029,065,032,056,028,063,116,052,031,066,114,050,116,065,001,203,111,067,030,054,030,067,028,065,031,054,113,064,032,052,114,065,032,055,111,065,103,066,029,064,104,065,031,065,031,052,031,068,028,065,032,052,031,065,114,054,030,066,113,053,113,065,103,066,001,209,031,054,030,066,029,066,031,054,112,063,034,054,112,064,032,053,113,066,102,068,028,067,101,067,029,066,031,055,028,065,030,063,034,053,030,067,112,055,029,065,114,052,114,066,102,067,112,054,001,216,026,065,032,051,115,068,028,054,112,068,029,054,112,065,103,063,033,067,101,064,031,063,033,054,030,067,028,065,032,054,029,069,111,053,030,066,114,054,112,066,102,065,114,055,085,118,047,066,202,117,048,064,115,051,115,066,101,068,112,052,114,066,102,063,116,054,112,067,030,054,029,066,029,067,030,052,114,065,032,051,115,065,031,052,114,065,103,066,030,065,102,065,031,065,032,054,029,067,001,209,100,069,111,052,114,065,103,067,112,055,111,067,030,055,028,068,028,068,029,050,115,067,031,052,113,068,029,054,112,066,102,066,029,066,103,065,030,067,030,053,030,066,030,065,031,055,029,065,233,056,110,067,101,068,112,054,112,063,033,053,030,069,027,064,033,053,113,067,030,054,112,064,032,054,112,065,103,066,029,064,103,068,028,065,031,054,030,064,031,063,034,052,031,065,114,051,032,065,001,213,101,068,112,052,114,065,032,052,031,068,027,068,029,053,113,064,032,051,115,064,033,052,113,065,103,067,029,064,103,067,029,067,029,052,032,063,032,067,030,051,032,065,114,050,033,065,114,054,001,205,111,054,112,066,031,053,030,065,031,066,030,049,117,063,033,054,112,065,032,050,116,066,101,066,030,067,100,067,029,064,032,052,032,065,030,067,029,052,032,064,115,051,032,066,113,054,112,065,001,198,112,066,031,052,031,065,031,067,029,053,113,066,031,051,115,063,033,052,114,065,103,065,030,068,100,067,029,065,031,052,031,069,027,064,033,053,030,064,115,053,030,067,113,052,113,065,103,067,001,209,032,052,031,065,030,066,031,052,114,065,031,054,113,064,032,054,112,067,101,067,029,067,100,067,029,065,031,053,031,069,026,066,031,053,030,066,113,053,031,066,113,054,112,065,103,064,115,054,001,207,030,065,031,055,111,064,033,052,113,065,032,054,112,064,103,066,030,065,103,065,030,066,031,053,030,065,031,064,032,053,031,066,113,051,032,064,115,053,113,068,100,067,112,053,087,115,050,065,197,114,051,065,114,052,114,065,103,067,112,053,113,066,102,067,112,055,111,066,031,054,029,064,031,066,031,053,113,064,032,053,114,066,031,052,113,065,102,066,030,066,102,066,030,065,031,054,029,067,001,210,104,066,113,054,113,064,104,064,115,053,113,064,033,053,030,067,028,066,031,050,116,066,031,053,113,065,031,054,112,065,103,066,029,069,099,064,032,066,030,053,030,065,031,063,033,052,031,065,235,054,112,067,101,064,115,054,112,067,030,053,030,066,029,067,030,055,111,065,032,054,112,066,031,054,111,066,103,067,028,066,102,066,030,066,030,053,031,067,028,063,034,053,030,065,114,052,032,065,001,209,104,065,114,054,112,066,031,053,031,064,031,065,031,054,112,065,032,054,112,067,030,053,113,067,101,067,028,065,103,067,029,065,032,051,031,067,029,063,034,054,029,067,112,054,030,065,114,055,001,214,112,055,111,065,032,053,030,066,030,064,032,054,112,067,030,054,112,064,032,056,111,064,104,064,032,065,102,066,029,066,031,052,032,063,032,065,032,051,032,065,114,055,028,067,112,052,114,065,001,198,112,065,031,054,029,067,029,062,035,052,113,065,032,054,112,065,031,056,111,064,103,065,031,063,104,066,030,066,030,053,031,065,030,063,033,053,031,066,113,052,031,067,112,053,113,066,102,067,001,208,030,055,029,066,029,066,031,053,113,066,030,055,111,067,030,050,116,065,103,065,030,065,103,066,029,066,031,052,031,066,029,064,033,053,030,066,113,051,033,064,115,054,112,064,104,067,112,051,001,215,029,066,031,055,111,067,030,055,111,065,031,052,114,067,100,068,029,065,102,065,030,064,033,052,031,066,030,066,030,053,031,064,115,052,031,068,111,053,113,066,102,066,114,052,088,117,048,067,193,116,049,064,115,051,115,067,101,066,113,052,114,065,103,067,113,052,113,068,029,052,032,067,028,068,029,051,115,064,032,054,112,063,034,053,113,065,103,067,028,068,100,068,028,066,030,056,028,066,001,205,105,065,114,053,113,066,102,066,113,056,110,069,028,056,028,067,028,065,032,051,115,066,031,053,112,065,032,054,112,065,103,069,026,066,102,065,030,067,030,052,031,068,028,063,033,052,031,067,236,054,111,065,103,065,114,052,114,066,031,053,030,067,029,063,033,053,113,064,033,053,112,065,032,054,112,063,104,065,031,067,101,067,028,063,034,051,032,067,029,065,031,053,030,064,115,051,033,066,001,205,102,066,113,052,114,066,031,054,029,066,029,067,030,054,112,066,030,054,112,065,032,052,114,067,101,069,027,065,103,065,030,065,032,051,032,065,030,066,030,053,031,064,115,052,032,063,115,053,001,206,112,054,112,065,031,053,031,066,029,064,033,049,116,066,031,054,111,066,031,052,114,065,103,066,029,064,104,067,029,063,033,053,030,064,031,067,030,050,033,067,112,053,031,065,114,052,114,061,001,203,114,065,031,053,031,067,028,067,030,052,114,064,032,054,112,062,035,053,113,065,102,068,029,066,101,065,030,065,032,053,030,063,032,065,032,051,033,066,112,052,031,064,115,055,112,066,101,066,001,207,030,054,029,065,031,068,028,054,112,066,031,053,113,062,034,051,115,065,103,068,027,064,104,065,030,068,029,049,034,066,029,064,033,049,034,066,113,051,032,067,112,053,113,067,101,066,113,055,001,201,031,064,032,053,113,063,033,055,111,065,032,053,112,067,101,068,027,066,102,065,030,066,031,053,030,066,029,067,030,052,032,067,111,054,030,064,114,054,112,068,100,066,113,056,081,112,051,063,196,120,044,062,117,047,119,064,103,068,112,052,114,064,103,068,112,055,111,062,034,054,030,066,029,066,031,051,114,066,031,054,112,065,031,054,112,068,100,066,030,063,105,065,030,065,031,054,030,066,001,203,104,066,114,051,115,064,103,067,112,054,113,065,031,052,031,068,028,068,029,052,113,064,033,053,112,065,032,052,114,066,102,065,030,066,102,065,030,067,029,054,030,063,032,061,035,055,029,063,232,056,110,066,102,068,111,052,113,065,032,054,029,065,031,064,032,051,115,064,032,054,112,064,032,052,114,064,104,066,029,063,105,065,030,063,034,051,031,067,029,066,031,052,031,067,111,053,030,066";
            var datas = data.split(",");
            datas.forEach(function(item){
                arr.push(parseInt(item));
            });
         }

        function init(){

            SCREEN_WIDTH = window.innerWidth * canvasZoom;
            SCREEN_HEIGHT = window.innerHeight;

            canvas = document.getElementById('canvas');
            canvas.width  = SCREEN_WIDTH  - 10;
            canvas.height = SCREEN_HEIGHT - 10;
            ctx = canvas.getContext('2d');

        }

        function draw(){
            // 条形图
            ctx.beginPath();           
            ctx.strokeStyle = "#99cc33";
            ctx.lineWidth = lineWidth;
            arr.forEach(function(item, index){
                var x1 = padding + index * (lineSpace+lineWidth);
                var y1 = SCREEN_HEIGHT - padding;
                var x2 = x1;
                var y2 = SCREEN_HEIGHT - padding - item * zoom;
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
            });
            ctx.stroke();

            // 文字
            ctx.beginPath();
            ctx.fillStyle = '#FF8888';
            ctx.font= "{0}px Consolas".format(textSize);
            arr.forEach(function(item, index){
                var x1 = padding + index * (lineSpace+lineWidth);
                var y1 = SCREEN_HEIGHT - padding;
                var x2 = x1;
                var y2 = SCREEN_HEIGHT - padding - item * zoom;
                ctx.fillText(item, x2, y2);
            });
            ctx.stroke();
        }

     </script>
</body>

</html>

条形图

分析

        function analysis(){
            var newArr = [];
            var keyPoints = [150,108,95,60,50,22];
            arr.forEach(function(item){
                for(var i = 0; i< keyPoints.length; i++){
                    if(item > keyPoints[i]){
                        newArr.push(i);
                        break;
                    }
                }
            });
            console.log(newArr.join(','));
        }
  1. data
3,4,0,5,3,3,3,2,3,3,3,2,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,0,3,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,0,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,0,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,0,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,0,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,0,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,3,1,5,3,0,1,4,4,1,5,1,3,2,3,1,5,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,0,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,0,2,3,1,4,1,3,5,4,5,3,5,3,5,5,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,5,5,3,1,4,0,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,5,1,3,0,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,0,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,0,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,3,1,5,3,0,1,5,3,1,4,1,3,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,0,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,5,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,0,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,5,5,3,1,4,0,1,4,1,3,5,4,5,3,5,3,5,5,1,3,5,4,1,3,5,5,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,0,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,0,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,0,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,3,1,5,3,0,1,4,3,1,4,1,3,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,0,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,5,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,0,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,0,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,0,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,0,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,5,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,0,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,3,1,5,3,0,1,5,3,1,4,1,3,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,0,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,0,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,0,1,4,1,3,5,4,5,3,5,3,5,5,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,5,5,3,1,4,5,3,1,4,1,3,0,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,0,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,5,5,3,5,3,5,5,5,3,1,4,5,3,1,4,1,3,2,3,1,4,0,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3,1,4,1,3,2,3,1,4,3,1,4,3,0,1,5,3,1,5,1,3,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,0,2,3,1,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,0,4,1,3,2,3,1,4,1,3,5,4,5,3,5,3,5,4,1,3,5,4,1,3,5,4,1,3,2,3,5,3,2,3,5,3,5,4,5,3,5,3,5,4,5,3,1,4,5,3
  1. data

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值