Question

我目前正在尝试创建的是一个可视化某些数据的坐标系。我不想使用现有的框架，但想从头开始创建它。

我所拥有的是三点，例如（15,20），（ - 5,1），（120，-17）。他们用x-min = -5和x-max = 120和y-min = -17和x-max = 20来定义坐标系的尺度。这个尺度是我无法找到的，因为它应该是有意义的。在这个例子中，坐标系从（-100，-100）到（100,100）到达每10个一个标记是没有意义的。

<html>
<head>
<script type="text/javascript">
function drawShape(){
  var canvas = document.getElementById('mycanvas');

  if (canvas.getContext){

    //draw canvas
    var context = canvas.getContext('2d');

    var canvasBorder = Math.floor(canvas.scrollHeight * 0.1);
    var xLength = Math.floor(canvas.scrollWidth - (canvasBorder * 2));
    var yLength = Math.floor(canvas.scrollHeight - (canvasBorder * 2));

    //draw coordinate system
    context.beginPath();
    context.moveTo(canvasBorder, canvasBorder);  //30,30
    context.lineTo(canvasBorder, canvasBorder + yLength); //30,270
    context.lineTo(canvasBorder + xLength, canvasBorder + yLength); //370,30
    context.stroke();

    //easy: define 5 values for x-axis
    var xMaxValue = 5;
    var tmp = Math.floor(xLength / xMaxValue);

    for(i = 0; i <= xMaxValue; i++){
        context.beginPath();
        context.moveTo(canvasBorder + tmp*i, canvasBorder + yLength);
        context.lineTo(canvasBorder + tmp*i, canvasBorder + yLength+10);
        context.fillText(i, canvasBorder + tmp*i, canvasBorder + yLength+10);
        context.stroke();
    }

    //difficult: have a max value for y-axis
    //too much space between 117 and 200, should display 120 or 150 instead
    //next level, what happens with -20 instead of 0 for min-y
    var yMaxValue = 117;
    var yIncrement = Math.pow(10, (Math.abs(Math.floor(yMaxValue)).toString().length)) / 10;
    var topValue = Math.floor(yMaxValue / yIncrement) + 1;

    var tmp = parseInt(yLength / topValue);

    for(i = 0; i <= topValue; i++){
        context.beginPath();
        context.moveTo(canvasBorder, yLength + canvasBorder - tmp*i);
        context.lineTo(canvasBorder - 10, yLength + canvasBorder - tmp*i);
        context.fillText(yIncrement * i, canvasBorder - 10, yLength + canvasBorder - tmp*i);
        context.stroke();
    }


  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</script>


</head>

<body onload="drawShape();">
<canvas id="mycanvas" width="400" height="300"
style="border:1px solid #ddd;">
</canvas>


</body>

</html>

或者有更好的方法来获取相应的数据创建坐标系吗？

干杯，弗洛里安

Answer 1

您希望将实际值映射到更传统的范围，以便在图表上显示。

例如，假设：

您的实际值介于-17到120之间。
您希望将这些实际值映射到更传统的0到100范围内。

这是一个将实际范围内的值映射到不同范围的函数。

function remap(value, actualMin, actualMax, newMin, newMax) {
    return(newMin + (newMax - newMin) * (value - actualMin) / (actualMax - actualMin);
}

例如，要将实际值33（范围-17到120）重新映射到0-100范围内：

remappedValue = remap( 33,  -17,120,  0,100 );

请注意，示例新范围0-100只是一个示例。

您可以将newMin所需的任何范围用于newMax。

坐标系中的选择比例

1 个答案: