Javascript 调整条形图中的条形图大小

我正在尝试制作JavaScript条形图绘图仪。对于彼此足够接近的值，它的效果非常好。这是输入数组[1,2,3,4,5,6,7]的外观：

使用输入数组[1,2,3,4,5,61000]：

我想说，从技术上讲，这应该是正确的行为，因为它只显示了大数字和其他数字之间的差异，但图表失去了它的清晰性。我不知道如何计算系数，这将调整栏到合适的（相对于画布高度更高）大小

代码如下：

function barplot()
{
    this.load = function(canvas)
    {
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
    },

    this.makebar = function(width, height, start)
    {
        this.ctx.beginPath();
        this.ctx.strokeStyle = "black";
        this.ctx.moveTo(start.x, start.y);
        this.ctx.lineTo(start.x,start.y-height);
        this.ctx.lineTo(start.x+width, start.y-height);
        this.ctx.lineTo(start.x+width,start.y);
        this.ctx.stroke();
        this.ctx.closePath();
    },

    this.plot = function(arr)
    {
        var width = this.canvas.width/arr.length;
        var max = Math.max.apply(null,arr);
        var min = Math.min.apply(null,arr);

        for(var i=0;i<arr.length;i++)    // Bar height generated here!
        {
            var coe = arr[i]/max;
            arr[i] = this.canvas.height*coe;  // The actual heights!
        }

        for(var i=0;i<arr.length;i++)
        {
            this.makebar(width, arr[i], {x:i*width,y:this.canvas.height});
        }
    }
}

---

在我看来，你想用某种指数或对数尺度来表示这些值之间的相对大小。这将有效地给小数字“提振”。在代码中，需要根据缩放方法计算最小值和最大值，而不是它们的原始值

选择一种适合您的环境的“好”方法是主观的，我不知道您正在绘制的数据的上下文，但以下是一些示例，说明了一些方法的外观（使用Excel中的数据栏绘制）

• 在第一行，我们有

  Math.pow（x，y）

  for 0>y>1
• 在第二行，我们有

  Math.pow（Math.log10（x+1），y）

  y>1

但是较高的条（比如第二张图片中的1000条）将仅部分可见，并失去其值。但是如果这是您想要的，您可以使您的系数取决于

arr

中值的平均值：

var b = new barplot();
b.load(your_canvas_element);
b.plot(array_of_numbers);