Question

我在画布上制作了一个简单的图形但是在两个问题上遇到了困难。

第一个问题是自动设置适当比例的垂直轴，并为阵列中的每个数据值留出足够的空间。理想情况下，我希望数字更接近最接近的百万或千等，具体取决于它的实际值范围，而不是像33145那样的值作为第一个比例线。

目前，一个值对于比例来说太高了，并且没有在画布上绘制，因为它超出范围。

第二个问题是，这些点似乎没有在他们正确的位置绘图，我不确定我的错误在哪里。

我做了一个JSFiddle，因为在没有看到它的情况下，它可能会有点令人困惑：

这是我绘制数据并绘制垂直轴的方法：

垂直轴：

    var x           = 0,
        y,
        range       = data.max() - data.min(),
        valueStep   = range / 10,

// get width of largest number
        margin      = 3 + ctx.measureText(data.min() + (valueStep*10)).width,

        pixelStep   = (graph.height-40) / 10,
        verticalP   = pixelStep,
        output;

// draw left hand values
    for(var i = 0; i < 11; i++){
        output = data.min() + (valueStep*i);                        

        y           = graph.height-20 - (verticalP + i*pixelStep);
        ctx.fillText(output,x,y+6); 

        ctx.beginPath();
        ctx.moveTo(margin, y);
        ctx.lineTo(x2,y);
        ctx.stroke();

    }

数据绘图：

    var y             = graph.height,
        x             = margin,
        pos,
        valueStep     = (graph.width-(margin*2)) / data.length,
        pixelRange    = graph.height-20,
        pp            = range / pixelRange;

    for(var i = 0; i < data.length; i++){   
        x   += valueStep;
        pos  = x - (valueStep/2);       

        ctx.beginPath();
        ctx.moveTo(x, graph.height-20);
        ctx.lineTo(x, graph.height);
        ctx.stroke();       


        ctx.fillText('Week '+(i+1),pos-(ctx.measureText('Week '+(i+1)).width/2),y);             
        ctx.beginPath();
        ctx.arc(pos,(graph.height-20)-(verticalP+(data[i]/pp)),2,0,2*Math.PI);
        ctx.stroke();
        ctx.fill();
    }

Answer 1

到目前为止工作还不错。

我做了一些更改：http://jsfiddle.net/ezttywzr/2/

获得我使用的比例

STEP = data.max() / NUM_HORIZONTAL_LINES

其中NUM_HORIZONTAL_LINES是您想要在x轴上方的水平线的数量。在这种情况下，我使用了10。

这意味着第一行将是1 * STEP，第二行将是2 * STEP，第三行将是3 * STEP，依此类推......

这种比例很方便，因为它可以保证最大值适合图形。实际上，由于我们定义比例的方式，最大值位于顶线。

一旦我们有了比例尺，就可以很容易地计算出相对于x轴的点的位置。它很简单：

(PIXELS_PER_STEP / STEP) * VALUE

为了更进一步，你可以做一些数学运算来计算图表的顶点，并选择一个具有良好圆数的标度。

Canvas Graph错误地绘制数据

1 个答案: