Javascript 关于沿特定直线绘制点（圆）的问题_Javascript_Html5 Canvas

Javascript 关于沿特定直线绘制点（圆）的问题

javascript html5-canvas

Javascript 关于沿特定直线绘制点（圆）的问题,javascript,html5-canvas,Javascript,Html5 Canvas,请看一下这个例子，让我知道如何从现有数组中获取点值，在这个例子中，data[]，并在每一行的顶部显示点值所以我有5个元素作为数组： var data = [200, 20820, 32, 9999955, 7580]; 并将5行设置为Line1、Line2、Line3、Line4和Line5，因此Line1的值为200，Line5的值为7850。我知道有一些像highcharts.js这样的库在做这件事，但由于每行的单位从十进制到大数字都非常不同，所以我必须重新生成一个新的 $(funct

请看一下这个例子，让我知道如何从现有数组中获取点值，在这个例子中，

data[]

，并在每一行的顶部显示点值

所以我有5个元素作为数组：

var data = [200, 20820, 32, 9999955, 7580];

并将5行设置为

Line1、Line2、Line3、Line4和Line5

，因此Line1的值为200，Line5的值为7850。我知道有一些像highcharts.js这样的库在做这件事，但由于每行的单位从十进制到大数字都非常不同，所以我必须重新生成一个新的

$(function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var data = [200, 20820, 32, 9999955, 7580];

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200, 50);
ctx.moveTo(200, 200);
ctx.lineTo(342, 154);
ctx.moveTo(200, 200);
ctx.lineTo(288, 321);
ctx.moveTo(200, 200);
ctx.lineTo(112, 321);
ctx.moveTo(200, 200);
ctx.lineTo(59, 154);
ctx.stroke();

ctx.font = "12px Arial";
ctx.fillText("Line 1", 185, 30);
ctx.fillText("Line 2", 360, 155);
ctx.fillText("Line 3", 300, 355);
ctx.fillText("Line 4", 90, 355);
ctx.fillText("Line 5", 10, 155);
});

感谢您使用范围如此广泛的值，您可以使用一个图表，其中值随着您在图表中向右移动而增加

震级图的一个常见例子是测量地震活动的里氏震级

下面是一个绘制在图表上的数据值示例，图表上每个彩色区域的数据值都会增加10倍

演示：

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
window.onload=function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var data = [200, 20820, 32, 9999955, 7580];
    var scale=['0','10','100','1K','10K','100K','1M','10M','100M'];
    var scaleWidth=50;
    var xs=[];
    var nScale=[];
    for(var i=0;i<9;i++){
        xs.push(i*scaleWidth);
        nScale.push(Math.pow(10,i));
    }
    nScale[0]=0;

    ctx.save();
    ctx.globalAlpha=0.25;
    //ctx.globalCompositeOperation="destination-over";
    for(var i=7;i>=0;i--){
        ctx.beginPath();
        ctx.moveTo(0,150);
        ctx.lineTo(xs[i],150-i*5);
        ctx.lineTo(xs[i],175+i*5);
        ctx.lineTo(0,175);
        ctx.closePath();
        ctx.fillStyle=randomColor();
        ctx.fill();
        ctx.stroke();
    }
    ctx.restore();

    for(var i=0;i<8;i++){
        ctx.beginPath();
        ctx.moveTo(xs[i],180+i*5);
        ctx.lineTo(xs[i],190+i*5);
        ctx.stroke();
        ctx.fillText(scale[i],xs[i],200+i*5);
    }

    plot();

    function plot(){
        for(var d=0;d<data.length;d++){
            var value=data[d];
            n=0;
            while(value/nScale[n]>10){ n++; }

            var pct=value/nScale[n+1];
            var x=parseInt(xs[n]+pct*scaleWidth);

            ctx.beginPath();
            ctx.arc(x,162,3,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle="black";
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(x,162);
            ctx.lineTo(x,150-60-d*15);
            ctx.strokeStyle="black";
            ctx.stroke();

            ctx.fillText(value,x+5,150-54-d*15);
        }
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

}; // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>


正文{背景色：象牙；}
画布{边框：1px纯红；}
window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var数据=[2002082032999957580]；
变量尺度=['0'、'10'、'100'、'1K'、'10K'、'100K'、'1M'、'10M'、'100M']；
var标度宽度=50；
var xs=[]；
var nScale=[]；
对于（变量i=0；i=0；i--）{
ctx.beginPath（）；
ctx.moveTo（0150）；
ctx.lineTo（xs[i]，150-i*5）；
ctx.lineTo（xs[i]，175+i*5）；
ctx.lineTo（0175）；
ctx.closePath（）；
ctx.fillStyle=randomColor（）；
ctx.fill（）；
ctx.stroke（）；
}
ctx.restore（）；
对于（var i=0；i“作为点”的值是什么？以及“每行顶部的点”如何转换？Hi TigOldBitties，我想的是为每行设置一个值，并计算从起点到点位置的距离，例如，对于第1行，设置值1000，然后在步骤200中定位点，你的意思是这样吗？