从圆环图中的每个扇区的中心绘制线开始？ [英] Draw line start from the center of each sector in donut chart?

问题描述

我需要您的帮助，我有使用画布绘制的以下甜甜圈图表

这是我用来绘制的代码

 < canvas id =chartwidth =500height =500style =background-color：black> < / canvas> 
 
< script type =text / javascript> 
 
 var canvas = document.getElementById（chart）; 
 var chart = canvas.getContext（2d）; 
 
 function drawdountChart（canvas）
 {
 
 this.x，this.y，this.radius，this.lineWidth，this.strockStyle，this.from， this.to = null; 
 this.set = function（x，y，radius，from，to，lineWidth，strockStyle）
 {
 this.x = x; 
 this.y = y; 
 this.radius = radius; 
 this.from = from; 
 this.to = to; 
 this.lineWidth = lineWidth; 
 this.strockStyle = strockStyle; 
} 
 
 this.draw = function（data）
 {
 canvas.beginPath（）; 
 canvas.lineWidth = this.lineWidth; 
 canvas.strokeStyle = this.strockStyle 
 canvas.arc（this.x，this.y，this.radius，this.from，this.to）; 
 canvas.stroke（）; 
 var numberOfParts = data.numberOfParts; 
 var parts = data.parts.pt; 
 var colors = data.colors.cs; 
 var artPercentage = null; 
 var beginFrom = 0; 
 for（var i = 0; i< numberOfParts; i ++）
 {
 percentage = parts [i] /this.radius; 
 canvas.beginPath（）; 
 canvas.lineWidth = 30; 
 canvas.strokeStyle = colors [i]; 
 canvas.arc（this.x，this.y，this.radius，beginFrom，（Math.PI * 2 * percentage）+ beginFrom）; 
 beginFrom =（Math.PI * 2 * percentage）+ beginFrom; 
 canvas.stroke（）; 
} 
} 
} 
 var data = 
 {
 numberOfParts：4，
 parts：{pt：[10，25 ，40，25]}，
颜色：{cs：[red，green，blue，yellow]}，
 comment：{coms：[comment1 ，comment2，comment3，comment4]} 
}; 
 
 var drawDount = new drawdountChart（chart）; 
 drawDount.set（150，150，100，0，Math.PI * 2，30，#FFF）; 
 drawDount.draw（data）; 
 
 
 
< / script> 
 
 
< / body> 
  

您可以注意到起始位置是（150X150），半径是100

我需要绘制一条从每个扇区的中心开始的线，但我不知道如何做，什么是正确的数学方程使用???

解决方案

演示： http://jsfiddle.net/m1erickson/Phfx4/

您可以计算从radianAngle1到radianAngle2的弧的中心点，

  var midAngle =（radianAngle2  -  radianAngle1）/ 2; 
 
 var x = centerX + radius * Math.cos（midAngle）; 
 
 var y = centerY + radius * Math.sin（midAngle）; 
  

所以这是如何从中心到每个弧的中点绘制线：

  var PI2 = Math.PI * 2; 
 accumPt = 0; 
 for（var i = 0; i< data.parts.pt.length; i ++）{
 var pt = data.parts.pt [i]; 
 var midPt = accumPt + pt / 2; 
 var midAngle = PI2 * midPt / 100; 
 console.log（i，pt，midPt）; 
 accumPt + = pt; 
 var x = 150 + 100 * Math.cos（midAngle）; 
 var y = 150 + 100 * Math.sin（midAngle）; 
 chart.save（）; 
 chart.beginPath（）; 
 chart.moveTo（150,150）; 
 chart.lineTo（x，y）; 
 chart.lineWidth = 3; 
 chart.strokeStyle =black; 
 chart.stroke（）; 
 chart.restore（）; 
} 
  

下面是示例代码和演示

  var canvas = document.getElementById（canvas）; var chart = canvas.getContext （2d）; function drawdountChart（canvas）{this.x，this.y，this.radius，this.lineWidth，this.strockStyle，this.from，this.to = null; this.set = function（x，y，radius，from，to，lineWidth，strockStyle）{this.x = x; this.y = y; this.radius = radius; this.from = from; this.to = to; this.lineWidth = lineWidth; this.strockStyle = strockStyle; } this.draw = function（data）{canvas.beginPath（）; canvas.lineWidth = this.lineWidth; canvas.strokeStyle = this.strockStyle; canvas.arc（this.x，this.y，this.radius，this.from，this.to）; canvas.stroke（）; var numberOfParts = data.numberOfParts; var parts = data.parts.pt; var colors = data.colors.cs; var artPercentage = null; var beginFrom = 0; for（var i = 0; i  

  body {background-color ：象牙} canvas {border：1px solid red;}  

  h4>从中心到圆弧中点的线。< / h4>< canvas id =canvaswidth = 300 height = 300>< / canvas>  

div>

I need your help , I have the following donut chart which I drawn using canvas

this is the code I used to draw it

    <canvas id="chart" width="500" height="500" style="background-color:black">  </canvas>

    <script type="text/javascript">

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

        function drawdountChart(canvas)
        {

            this.x , this.y , this.radius , this.lineWidth , this.strockStyle , this.from , this.to = null;
            this.set = function( x, y, radius, from, to, lineWidth, strockStyle)
            {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.from=from;
                this.to= to;
                this.lineWidth = lineWidth;
                this.strockStyle = strockStyle; 
            }

            this.draw = function(data)
            {
                canvas.beginPath();
                canvas.lineWidth = this.lineWidth;
                canvas.strokeStyle = this.strockStyle;
                canvas.arc(this.x , this.y , this.radius , this.from , this.to);
                canvas.stroke();
                var numberOfParts = data.numberOfParts;
                var parts = data.parts.pt;
                var colors = data.colors.cs;
                var artPercentage = null;
                var beginFrom = 0;
               for(var i = 0; i<numberOfParts; i++)
               {
                percentage= parts[i]/this.radius;
                canvas.beginPath();
                canvas.lineWidth=30;
                canvas.strokeStyle = colors[i];
                canvas.arc(this.x , this.y ,this.radius , beginFrom , (Math.PI*2*percentage)+beginFrom); 
                beginFrom = (Math.PI*2*percentage)+beginFrom;
                canvas.stroke();
               }
            }
        }
        var data = 
            {
                numberOfParts: 4,
                parts:{"pt": [10, 25, 40, 25]},
                colors:{"cs": ["red", "green", "blue", "yellow" ]}, 
                comments:{coms:["comment1", "comment2", "comment3", "comment4" ]}
            };

        var drawDount = new drawdountChart(chart);
        drawDount.set(150, 150, 100, 0, Math.PI*2, 30, "#FFF");
        drawDount.draw(data);



    </script>


</body>

you can note that the start position is (150X150) and the radius is 100

and I need to draw a line which start from the center of each sector , but I do not know how to do that and what is the correct mathematics equation to use???

解决方案

A Demo: http://jsfiddle.net/m1erickson/Phfx4/

You can calculate the centerpoint of an arc that spans from radianAngle1 to radianAngle2 like this:

var midAngle = (radianAngle2 - radianAngle1)/2;

var x = centerX + radius * Math.cos( midAngle );

var y = centerY + radius * Math.sin( midAngle );

So this is how to draw lines from the center to the midpoints of each of your arcs:

var PI2=Math.PI*2;
accumPt=0;
for(var i=0;i<data.parts.pt.length;i++){
    var pt=data.parts.pt[i];
    var midPt=accumPt+pt/2;
    var midAngle=PI2*midPt/100;
    console.log(i,pt,midPt);
    accumPt+=pt;
    var x=150+100*Math.cos(midAngle);
    var y=150+100*Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150,150);
    chart.lineTo(x,y);
    chart.lineWidth=3;
    chart.strokeStyle="black";
    chart.stroke();
    chart.restore();
}

Here's example code and a Demo

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

function drawdountChart(canvas) {

    this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
    this.set = function (x, y, radius, from, to, lineWidth, strockStyle) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.from = from;
        this.to = to;
        this.lineWidth = lineWidth;
        this.strockStyle = strockStyle;
    }

    this.draw = function (data) {
        canvas.beginPath();
        canvas.lineWidth = this.lineWidth;
        canvas.strokeStyle = this.strockStyle;
        canvas.arc(this.x, this.y, this.radius, this.from, this.to);
        canvas.stroke();
        var numberOfParts = data.numberOfParts;
        var parts = data.parts.pt;
        var colors = data.colors.cs;
        var artPercentage = null;
        var beginFrom = 0;
        for (var i = 0; i < numberOfParts; i++) {
            percentage = parts[i] / this.radius;
            canvas.beginPath();
            canvas.lineWidth = 30;
            canvas.strokeStyle = colors[i];
            canvas.arc(this.x, this.y, this.radius, beginFrom, (Math.PI * 2 * percentage) + beginFrom);
            beginFrom = (Math.PI * 2 * percentage) + beginFrom;
            canvas.stroke();
        }
    }
}
var data = {
    numberOfParts: 4,
    parts: {
        "pt": [10, 25, 40, 25]
    },
    colors: {
        "cs": ["red", "green", "blue", "yellow"]
    },
    comments: {
        coms: ["comment1", "comment2", "comment3", "comment4"]
    }
};

var drawDount = new drawdountChart(chart);
drawDount.set(150, 150, 100, 0, Math.PI * 2, 30, "#FFF");
drawDount.draw(data);


var PI2 = Math.PI * 2;
accumPt = 0;
for (var i = 0; i < data.parts.pt.length; i++) {
    var pt = data.parts.pt[i];
    var midPt = accumPt + pt / 2;
    var midAngle = PI2 * midPt / 100;
    console.log(i, pt, midPt);
    accumPt += pt;
    var x = 150 + 100 * Math.cos(midAngle);
    var y = 150 + 100 * Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150, 150);
    chart.lineTo(x, y);
    chart.lineWidth = 3;
    chart.strokeStyle = "black";
    chart.stroke();
    chart.restore();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>Lines from center to arc midpoints.</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于从圆环图中的每个扇区的中心绘制线开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！