我是Java语言的新手，我必须在折线图中显示2个Ajax数组，但不能。我从ajax获得了2个数组，但是我不知道如何暗示这些数组进行编码。

我只需要使用纯JavaScript和canvas。我看到此链接为我提供了一个很好的例子。因此，我决定更改它。

https://instructobit.com/tutorial/90/Creating-line-graphs-with-Javascript-using-an-HTML-canvas

我更改了它，但是我只能添加一行，而这行看起来并不正确。另外，我的两个阵列显示最近7天的收入在1000万到1亿之间。这是我的代码。

picture of my line chart

  function drawGraph( dataArr ){
        var canvas = document.getElementById( "testCanvas" );
        var context = canvas.getcontext( "2d" );

        var GRAPH_TOP = 25;
        var GRAPH_BOTTOM = 375;
        var GRAPH_LEFT = 25;
        var GRAPH_RIGHT = 475;

        var GRAPH_HEIGHT = 350;
        var GRAPH_WIDTH = 450;

        var arrayLen = dataArr.length;

        var largest = 0;
        for( var i = 0; i < arrayLen; i++ ){
            if( dataArr[ i ] > largest ){
                largest = dataArr[ i ];
            }
        }

        context.clearRect( 0,500,400 );
        // set font for fillText()
        context.font = "16px Arial";

        // draw X and Y axis
        context.beginPath();
        context.moveTo( GRAPH_LEFT,GRAPH_BOTTOM );
        context.lineTo( GRAPH_RIGHT,GRAPH_TOP );
        context.stroke();

        // draw reference line
        context.beginPath();
        context.strokeStyle = "#BBB";
        context.moveTo( GRAPH_LEFT,GRAPH_TOP );
        context.lineTo( GRAPH_RIGHT,GRAPH_TOP );
        // draw reference value for hours
        context.fillText( largest,GRAPH_RIGHT + 15,GRAPH_TOP);
        context.stroke();

        // draw reference line
        context.beginPath();
        context.moveTo( GRAPH_LEFT,( GRAPH_HEIGHT ) / 4 * 3 + GRAPH_TOP );
        context.lineTo( GRAPH_RIGHT,( GRAPH_HEIGHT ) / 4 * 3 + GRAPH_TOP );
        // draw reference value for hours
        context.fillText( largest / 4,( GRAPH_HEIGHT ) / 4 * 3 + GRAPH_TOP);
        context.stroke();

        // draw reference line
        context.beginPath();
        context.moveTo( GRAPH_LEFT,( GRAPH_HEIGHT ) / 2 + GRAPH_TOP );
        context.lineTo( GRAPH_RIGHT,( GRAPH_HEIGHT ) / 2 + GRAPH_TOP );
        // draw reference value for hours
        context.fillText( largest / 2,( GRAPH_HEIGHT ) / 2 + GRAPH_TOP);
        context.stroke();

        // draw reference line
        context.beginPath();
        context.moveTo( GRAPH_LEFT,( GRAPH_HEIGHT ) / 4 + GRAPH_TOP );
        context.lineTo( GRAPH_RIGHT,( GRAPH_HEIGHT ) / 4 + GRAPH_TOP );
        // draw reference value for hours
        context.fillText( largest / 4 * 3,( GRAPH_HEIGHT ) / 4 + GRAPH_TOP);
        context.stroke();

        // draw titles
        context.fillText( "Revenue Last 7 days",GRAPH_RIGHT / 3,GRAPH_BOTTOM + 50);
        context.fillText( "Hours",GRAPH_RIGHT + 30,GRAPH_HEIGHT / 2);

        context.beginPath();
        context.lineJoin = "round";
        context.strokeStyle = "black";

        context.moveTo( GRAPH_LEFT,( GRAPH_HEIGHT - dataArr[ 0 ] / largest * GRAPH_HEIGHT ) + GRAPH_TOP );
        // draw reference value for day of the week
        context.fillText( "1",15,GRAPH_BOTTOM + 25);
        for( var i = 1; i < arrayLen; i++ ){
            context.lineTo( GRAPH_RIGHT / arrayLen * i + GRAPH_LEFT,( GRAPH_HEIGHT - dataArr[ i ] / largest * GRAPH_HEIGHT ) + GRAPH_TOP );
            // draw reference value for day of the week
            context.fillText( ( i + 1 ),GRAPH_RIGHT / arrayLen * i,GRAPH_BOTTOM + 25);
        }
        context.stroke();
    }

    drawGraph(myfirstarray);