Javascript 向html5画布折线图添加两个数组

我是Javascript新手，我必须在折线图中显示2个ajax数组，但我不能。我从ajax中获得了两个数组，但我不知道如何将这些数组隐含到代码中

我只需要使用纯javascript和画布。我看到这个链接对我来说是一个很好的例子。所以，我决定改变它

我更改了它，但我只能添加一行，这行看起来不正确。此外，我的两个阵列显示过去7天的收入在1000万到100万之间。这是我的密码

函数绘图图（dataArr）{
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
var图_TOP=25；
var图_底部=375；
var图_左=25；
var图右=475；
var图_高度=350；
var图_宽度=450；
var arrayLen=数据阵列长度；
var最大值=0；
对于（变量i=0；i最大值）{
最大值=数据阵列[i]；
}
}
clearRect（0,0500400）；
//设置fillText（）的字体
context.font=“16px Arial”；
//绘制X轴和Y轴
context.beginPath（）；
moveTo（图左，图底）；
lineTo（图右，图底）；
lineTo（图右，图上）；
stroke（）；
//画参考线
context.beginPath（）；
context.strokeStyle=“#BBB”；
moveTo（图左，图上）；
lineTo（图右，图上）；
//绘制小时的参考值
context.fillText（最大，右图+15，上图）；
stroke（）；
//画参考线
context.beginPath（）；
context.moveTo（图左，（图高）/4*3+图上）；
context.lineTo（图右，（图高）/4*3+图顶）；
//绘制小时的参考值
context.fillText（最大/4，图右+15，（图高）/4*3+图顶）；
stroke（）；
//画参考线
context.beginPath（）；
context.moveTo（图左，（图高）/2+图上）；
lineTo（图右，（图高）/2+图顶）；
//绘制小时的参考值
context.fillText（最大/2，图右+15，（图高）/2+图顶）；
stroke（）；
//画参考线
context.beginPath（）；
context.moveTo（图左，（图高）/4+图上）；
lineTo（图右，（图高）/4+图顶）；
//绘制小时的参考值
context.fillText（最大/4*3，图右+15，（图高）/4+图顶）；
stroke（）；
//抽签
context.fillText（“最近7天的收入”，图右/3，图底+50）；
上下文。填充文本（“小时”，图右+30，图高/2）；
context.beginPath（）；
context.lineJoin=“round”；
context.strokeStyle=“黑色”；
moveTo（GRAPH\u LEFT，（GRAPH\u HEIGHT-dataArr[0]/最大*GRAPH\u HEIGHT）+GRAPH\u TOP）；
//绘制星期几的参考值
上下文。填充文本（“1”，15，图表底部+25）；
对于（变量i=1；i

您对使用外部javascript感兴趣吗？比如chart.js？如果你同意的话，它看起来也很棒。我可以帮你做……在这之前我用chart.js和canvas.js做过，但我必须用纯javascript和canvas做，因为javascript框架在我的屏幕上有延迟。我用google chart代替。它声称支持ie9及以上版本。所以，我试了一下。你对使用外部javascript感兴趣吗？比如chart.js？如果你同意的话，它看起来也很棒。我可以帮你做……在这之前我用chart.js和canvas.js做过，但我必须用纯javascript和canvas做，因为javascript框架在我的屏幕上有延迟。我用google chart代替。它声称支持ie9及以上版本。所以，我试了一下。

  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, 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_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_RIGHT + 15, ( 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_RIGHT + 15, ( 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_RIGHT + 15, ( 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);