使用html5 canvas和纯javascript绘制散点图，没有带对数轴的库

Question

我发布问题是因为我在任何地方都找不到信息，大多数教程都需要使用精美的库，而我只是不想从包含以下数据示例的两个json多维数组中绘制html5 canvas散点图：

{ 'dataset1' [ { "p0" : "0.69", "log(p0)" : "14", "p0_name" : "cn95" }, ]

而另一轴

 { "p1" : "0.69", "log(p1)" : "14", "p1_name" : "dn95" }, 

我要重新创建的示例是这样的 。

我最大的问题是让画布使用对数刻度。 您可以从示例链接中看到从数据中看到内容所必需的。 摆弄一个小提琴会很棒，并创建自己的小提琴！ 这是我到目前为止的内容：

http://jsfiddle.net/3L4humdv/ ，这是使用链接的数据即时消息

Answer 1

Canvas不能开箱即用地使用对数刻度，您必须为点提供一个函数以自行缩放。

我建议执行以下步骤：

• 具有取一轴值及其最大值的功能。
• 在函数内部规范化
• 然后将对数函数应用于该值并返回
• 对画布的宽度/高度使用归一化值来绘制点

使用相同的功能绘制图形容器以及点/线等。

例如，使用“伪”（没有特殊目的）日志功能：

 var ctx = canvas.getContext('2d'), w = canvas.width, h = canvas.height - 10, // give room for point/text maxHeight = 1000, axisStep = 100; function myLog(v, max) { var n = v / max; // normalize return n * n * n; // some log formula } // draw scale per axis step for(var i = 0; i < maxHeight; i += axisStep) { // get normalized value, multiply with canvas height and reverse axis var y = h - myLog(i, maxHeight) * h; // show axis mark each 100 ctx.moveTo(0, y); ctx.lineTo(20, y); } ctx.lineWidth=2; ctx.stroke(); ctx.fillStyle = "red"; // some random points between 0 and max height for(var x = 30; x < w; x += 30) { var v = Math.random() * maxHeight, // some value y = h - myLog(v, maxHeight) * h; // convert to y in canvas ctx.fillRect(x, y, 7, 7); ctx.fillText(v.toFixed(0), x + 9, y +7); } 

 <canvas id=canvas width=500 height=500></canvas> 

x值也一样。 只需将日志功能替换为适合您目的的一种即可。

希望这可以帮助！