Холст-график неверно отображает данные

Question

Я сделал простой график на холсте, но у меня возникли трудности с двумя проблемами.

Первый выпуск - установка вертикальной оси с соответствующим масштабом автоматически с достаточным пространством для каждого значения данных в массиве. В идеале я хотел бы, чтобы числа были округлены до ближайших миллионов или тысяч и т. Д., В зависимости от его фактических диапазонов значений, а не значения, такого как 33145 как первая линия шкалы.

В настоящее время одно значение слишком велико для шкалы и не рисуется на холсте, потому что оно выходит за пределы.

Вторая проблема - это точки, которые, кажется, не строят в правильном месте, и я не уверен, где была моя ошибка.

Я сделал 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 это количество горизонтальных линий, которые вы хотите выше оси х. В этом случае я использовал 10.

Это означает, что первая строка будет 1 * STEP, второй будет 2 * STEP, третий будет 3 * STEP и так далее ..

Эта шкала удобна тем, что он гарантирует, что макс значение соответствует графику. Фактически максимальное значение находится в верхней строке из-за того, как мы определили масштаб.

Как только у нас есть масштаб, легко вычислить положение точек относительно оси х. Это просто:

(PIXELS_PER_STEP/STEP) * VALUE 

Чтобы перейти на шаг дальше, вы можете сделать некоторую математику, чтобы закруглить верхнюю точку графика и выбрать шкалу с, которая имеет хорошие круглые числа.