Question

请您看看这个示例，让我知道如何从现有数组中获取Point值，在此示例中为data[]并将值显示为eacha行顶部的点？

所以我有5个元素是数组：

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

和5行为Line1 , Line2, Line3, Line4, and 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);
});

由于

Answer 1

使用如此宽的范围值，您可以使用一个图表，当您在图表中向右移动时，值会增加幅度。

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

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

演示：http://jsfiddle.net/m1erickson/3fuwV/

enter image description here

示例代码：

<!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>

沿特定线绘制点（圆）的问题

1 个答案: