用戶輸入數據創建 Canvas 元素餅圖

Question

我想創建一個元素，最終用戶可以在其中輸入其信息，結果顯示在餅圖中。

我借了一個預制的餅圖，將數據作為固定數字插入時，沒有問題，它顯示了正確的分布。

但是，在此示例中添加用戶輸入以范圍類型來替換其中一個數據點時，它不會顯示結果。 我在這里想念什么？

<canvas id="test_canvas" width="400" height="250"></canvas>

<input id="danmark" type="range" min="1000" max ="3000" step="100" placeholder ="2500" value="2500" oninput="myFunction()" > 

<script>



// pie chart drawings
function drawPieChart( data, colors, title ){ 
    var canvas = document.getElementById( "test_canvas" ); 
    var context = canvas.getContext( "2d" ); 
 
    // get length of data array 
    var dataLength = data.length; 
    // declare variable to store the total of all values 
    var total = 0; 
 
    // calculate total 
    for( var i = 0; i < dataLength; i++ ){ 
        // add data value to total 
        total += data[ i ][ 1 ]; 
    } 
 
    // declare X and Y coordinates of the mid-point and radius 
    var x = 100; 
    var y = 100; 
    var radius = 100; 
 
    // declare starting point (right of circle) 
    var startingPoint = 0; 
 
    for( var i = 0; i < dataLength; i++ ){ 
        // calculate percent of total for current value 
        var percent = data[ i ][ 1 ] * 100 / total; 
 
        // calculate end point using the percentage (2 is the final point for the chart) 
        var endPoint = startingPoint + ( 2 / 100 * percent ); 
 
        // draw chart segment for current element 
        context.beginPath();    
        // select corresponding color 
        context.fillStyle = colors[ i ]; 
        context.moveTo( x, y ); 
        context.arc( x, y, radius, startingPoint * Math.PI, endPoint * Math.PI );     
        context.fill(); 
 
        // starting point for next element 
        startingPoint = endPoint;  
  
        // draw labels for each element 
        context.rect( 220, 25 * i, 15, 15 ); 
        context.fill(); 
        context.fillStyle = "black"; 
        context.fillText( data[ i ][ 0 ] + " (" + data[ i ][ 1 ] + ")", 245, 25 * i + 15 ); 
  }
    // draw title 
    context.font = "20px Arial"; 
    context.textAlign = "center"; 
    context.fillText( title, 100, 225 );  
}

function myFunction () {

var Danmark = document.getElementbyId('danmark').value;

var Norge = 850;

var Sverige = 2400;

var Finland = 1000;

var Holland = 3000;

}  

// the data, which needs to be calculated based on user input variables. 
var data = [ [ "Danmark", Danmark ], [ "NL", Holland ], [ "NO", Norge ], [ "SE", Sverige ], [ "FI", Finland ] ]; 
var colors = [ "red", "orange", "green", "blue", "purple"  ];  
  
// using the function  
drawPieChart( data, colors, "Sales" );  


</script> 

```

Answer 1

你有一個錯字

var Danmark = document.getElementbyId('danmark').value;

它應該是getElementById而不是getElementbyId 。

另一件事。 當您從input或textarea獲取值時，它默認返回字符串值。 您必須將該值轉換為數字格式。

 let Danmark = document.getElementById('danmark').value; let converted = parseInt(Danmark); function checkVals() { console.log(typeof Danmark); console.log(typeof converted); }

 <textarea id="danmark" onchange="checkVals()"></textarea>

Answer 2

在drawPieChart function 的開頭，在context變量下，您需要添加context.clearRect(0, 0, canvas.width, canvas.height); . 這將為下一次繪制清除 canvas，否則它只會在已經存在的內容之上繪制，您將無法看到更改。

所以它看起來像這樣：

  function drawPieChart( data, colors, title ){
    var canvas = document.getElementById( "test_canvas" );
    var context = canvas.getContext( "2d" );
    context.clearRect(0, 0, canvas.width, canvas.height);