更改代碼以在javascript中獲得豎線吧

我遇到了問題，我需要垂直條而不是水平條。我如何需要更改代碼？例如，這個程序的使用是讓老師輸入考試結果，並獲得一個很好的圖表來比較學生。更改代碼以在javascript中獲得豎線吧

HTML代碼：

<head> 
    <title>examAnalysis</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="examAnalysis.js"></script> 
</head> 

<body> 
    <button onclick="gatherData()">Add Participant</button> 
    <h4>Chart</h4> 
    <div id="chart"></div> 
</body>

JavaScript代碼：

var participant = []; 
var maxPoints = 200; 
var barHeight = 20; 

function gatherData() { 
    var name = window.prompt('Please enter the name of the participant:'); 
    var points = window.prompt('Please enter the achieved points of the participant:'); 

    name = name.replace(/\s+/g, ''); 
    points = parseInt(points, 10); 


    if (name !== '' && !isNaN(points)) { 
     participant.push({name: name, points: points}); 
    } 

    createChart(); 
}; 

function createChart() { 
    var i = 0; 
    var len = participant.length; 
    var bar = null; 

    var container = document.getElementById('chart'); 
    container.innerHTML=''; 

    while (i < len) { 

     bar = document.createElement('div'); 
     bar.style.height = barHeight + 'px'; 
     bar.style.marginBottom = '5px'; 
     bar.style.backgroundColor = getRandomColor(); 

     bar.style.width = ((participant[i].points/maxPoints) * 100) + '%'; 
     bar.innerHTML = ['<p>', participant[i].name, '</p>'].join(''); 

     container.appendChild(bar); 

     i = i+1; 
    } 
}; 

function getRandomColor() { 
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join(''); 
};

來源

2015-06-07 kentas

變化

變種barHeight = 20; var barWidth = 20;

更改bar.style。高度 = barHeight +'px'; bar.style。寬度 = barWidth +'px';

更改bar.style。寬度 =（（參與者[i] .points/maxPoints）* 100）+'％';到 bar.style。高度 =（（參與者[i] .points/maxPoints）* 100）+'％';

這將使圖表垂直，但他們將被堆積，所以你需要做一些關於每個酒吧的位置的工作。

<head> 
    <title>examAnalysis</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript"> 
var participant = []; 
var maxPoints = 200; 
var barWidth = 20; 

function gatherData() { 
    var name = window.prompt('Please enter the name of the participant:'); 
    var points = window.prompt('Please enter the achieved points of the participant:'); 

    name = name.replace(/\s+/g, ''); 
    points = parseInt(points, 10); 


    if (name !== '' && !isNaN(points)) { 
     participant.push({name: name, points: points}); 
    } 

    createChart(); 
}; 

function createChart() { 
    var i = 0; 
    var len = participant.length; 
    var bar = null; 

    var container = document.getElementById('chart'); 
    container.innerHTML=''; 

    while (i < len) { 

     bar = document.createElement('div'); 
     bar.style.width = barWidth + 'px'; 
     bar.style.marginBottom = '5px'; 
     bar.style.backgroundColor = getRandomColor(); 

     bar.style.height = ((participant[i].points/maxPoints) * 100) + '%'; 
     bar.innerHTML = ['<p>', participant[i].name, '</p>'].join(''); 

     container.appendChild(bar); 

     i = i+1; 
    } 
}; 

function getRandomColor() { 
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join(''); 
}; 
    </script> 
</head> 

<body> 
    <button onclick="gatherData()">Add Participant</button> 
    <h4>Chart</h4> 
    <div id="chart"></div> 
</body>

function createChart() 
 
    { 
 
    \t var i = 0; 
 
    \t var len = participant.length; 
 
    \t var bar = null; 
 
    
 
    \t var container = document.getElementById('chart'); 
 
    \t container.innerHTML=''; 
 
    
 
    \t while (i < len) 
 
    \t { 
 
    
 
    \t \t bar = document.createElement('div'); 
 
    \t \t bar.style.width = barWidth + 'px'; 
 
    \t \t bar.style.marginBottom = '5px'; 
 
    \t \t bar.style.backgroundColor = getRandomColor(); 
 
    \t \t bar.style.float = 'left'; 
 
    \t \t bar.style.marginRight = '10px'; 
 
    
 
    \t \t bar.style.height = ((participant[i].points/maxPoints) * 200) + 'px'; 
 
    \t \t bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px'; 
 
    \t \t percent = ((participant[i].points/maxPoints) * 100) + '%'; 
 
    \t \t bar.innerHTML = ['<p>', participant[i].name, '<br />', percent, '</p>'].join(''); 
 
    
 
    \t \t container.appendChild(bar); 
 
    
 
    \t \t i = i + 1; 
 
    \t } 
 
    };

來源

2015-06-07 13:53:52 Lance

更改代碼以在javascript中獲得豎線吧

回答

相關問題