Невозможно получить несколько диаграмм пирога холста

Я пытаюсь получить несколько диаграмм кругов холста, добавляя различные идентификаторы в теге. Но это не работает.Невозможно получить несколько диаграмм пирога холста

Я не могу получить несколько холстов.

, пожалуйста, предложите некоторые изменения или иначе, которые могут решить мою проблему.

Я прилагаю мой код ниже:

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Canvas Test</title> 
 
</head> 
 

 
<body> 
 
    <section> 
 
     <div> 
 
      <canvas id="canvas" width="400" height="300"> 
 
       This text is displayed if your browser does not support HTML5 Canvas. 
 
      </canvas> 
 
     </div> 
 

 
     <script type="text/javascript"> 
 
      var myColor = ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]; 
 
      var myData = [10, 30, 20, 60, 40]; 
 

 
      function getTotal() { 
 
       var myTotal = 0; 
 
       for (var j = 0; j < myData.length; j++) { 
 
        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0; 
 
       } 
 
       return myTotal; 
 
      } 
 

 
      function plotData() { 
 
       var canvas; 
 
       var ctx; 
 
       var lastend = 0; 
 
       var myTotal = getTotal(); 
 

 
       canvas = document.getElementById("canvas"); 
 
       ctx = canvas.getContext("2d"); 
 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
       for (var i = 0; i < myData.length; i++) { 
 
        ctx.fillStyle = myColor[i]; 
 
        ctx.beginPath(); 
 
        ctx.moveTo(200, 150); 
 
        ctx.arc(200, 150, 150, lastend, lastend + 
 
         (Math.PI * 2 * (myData[i]/myTotal)), false); 
 
        ctx.lineTo(200, 150); 
 
        ctx.fill(); 
 
        lastend += Math.PI * 2 * (myData[i]/myTotal); 
 
       } 
 
      } 
 

 
      plotData(); 
 
     </script> 
 
    </section> 
 
</body> 
 

 
</html>

источник

2015-06-26 akhil verma

вы хотите несколько круговых диаграмм на одном холсте, или вы хотите более одного холста ли? – Niddro

@ Niddro ...... Я хотел использовать разные круговые диаграммы для разных данных на одной странице, используя холст. –

Вы можете немного изменить вашу функцию plotData так, что она позволяет аргументы как цвет и проценты, но и х- и у-координаты и пирог радиус диаграммы. Затем вы можете создать двумерные массивы для ваших данных и цветов круговой диаграммы.

Это позволяет вам решить, где разместить ваши круговые диаграммы и какие данные использовать.

Круговые диаграммы на одном холсте

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"], 
 
       ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]]; 
 
      var myData = [[10, 30, 20, 60, 40], 
 
         [20, 5, 15, 50, 40]]; 
 

 
function getTotal(data) { 
 
    var myTotal = 0; 
 
    for (var j = 0; j < data.length; j++) { 
 
     myTotal += (typeof data[j] == 'number') ? data[j] : 0; 
 
    } 
 
    return myTotal; 
 
} 
 

 
function plotData(x,y,r,data,colors) { 
 
    var canvas; 
 
    var ctx; 
 
    var lastend = 0; 
 
    var myTotal = getTotal(data); 
 
    
 
    canvas = document.getElementById("canvas"); 
 
    ctx = canvas.getContext("2d"); 
 
    //ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    for (var i = 0; i < data.length; i++) { 
 
     ctx.fillStyle = colors[i]; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(x, y); 
 
     ctx.arc(x, y, r, lastend, lastend + 
 
       (Math.PI * 2 * (data[i]/myTotal)), false); 
 
     ctx.lineTo(x, y); 
 
     ctx.fill(); 
 
     lastend += Math.PI * 2 * (data[i]/myTotal); 
 
    } 
 
} 
 

 
plotData(100,50,50,myData[0],myColor[0]); 
 
plotData(100,180,80,myData[1],myColor[1]);

<canvas id="canvas" width="400" height="300"> 
 
       This text is displayed if your browser does not support HTML5 Canvas. 
 
      </canvas>

Круговые диаграммы на разных полотнах

Для достижения этой цели, просто добавьте еще один аргумент в вашу функцию plotData, а именно, canvas id. См. Пример ниже.

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"], 
 
       ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]]; 
 
      var myData = [[10, 30, 20, 60, 40], 
 
         [20, 5, 15, 50, 40]]; 
 

 
function getTotal(data) { 
 
    var myTotal = 0; 
 
    for (var j = 0; j < data.length; j++) { 
 
     myTotal += (typeof data[j] == 'number') ? data[j] : 0; 
 
    } 
 
    return myTotal; 
 
} 
 

 
function plotData(x,y,r,data,colors,c_id) { 
 
    var canvas; 
 
    var ctx; 
 
    var lastend = 0; 
 
    var myTotal = getTotal(data); 
 
    
 
    canvas = document.getElementById(c_id); 
 
    ctx = canvas.getContext("2d"); 
 
    //ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    for (var i = 0; i < data.length; i++) { 
 
     ctx.fillStyle = colors[i]; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(x, y); 
 
     ctx.arc(x, y, r, lastend, lastend + 
 
       (Math.PI * 2 * (data[i]/myTotal)), false); 
 
     ctx.lineTo(x, y); 
 
     ctx.fill(); 
 
     lastend += Math.PI * 2 * (data[i]/myTotal); 
 
    } 
 
} 
 

 
plotData(75,50,50,myData[0],myColor[0],"canvas_1"); 
 
plotData(75,50,50,myData[1],myColor[1],"canvas_2");

canvas { 
 
    border: 1px solid black; 
 
    }

<canvas id="canvas_1" width="150" height="200"></canvas> 
 
<canvas id="canvas_2" width="150" height="200"></canvas>

источник

2015-06-27 06:21:22 Niddro

Как я могу использовать разные круговые диаграммы с разными «canvas id». –

спасибо очень. –

Добро пожаловать, рад, что смогу помочь. – Niddro

Невозможно получить несколько диаграмм пирога холста

ответ

Смежные вопросы