javascript - Canvas Graph 错误地绘制数据

Question

我在 Canvas 上制作了一个简单的图表，但遇到两个问题。

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

当前某个值对于比例来说太高，并且由于超出范围而未绘制在 Canvas 上。

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

我制作了一个 JSFiddle，因为在大多数情况下，如果没有看到它的实际效果，它可能会有点困惑:

<强> http://jsfiddle.net/ezttywzr/

这就是我绘制数据和绘制垂直轴的方式:

垂直轴:

    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

要更进一步，您可以做一些数学运算，将图表的顶点向上舍入，并选择一个具有良好舍入数字的比例。