Question

我遇到的问题是我需要垂直条而不是水平条。我如何更改代码？例如，该程序的使用是为了让教师输入考试成绩并获得一个很好的图表来比较学生。

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('');
 };

Answer 1

更改var barHeight = 20;到var barWidth = 20;

更改bar.style。高度 = barHeight +＆＃39; px＆＃39 ;;到bar.style。宽度 = barWidth +＆＃39; px＆＃39;;

更改bar.style。 width =（（参与者[i] .points / maxPoints）* 100）+＆＃39;％＆＃39 ;;至 bar.style。身高 =（（参与者[i] .points / maxPoints）* 100）+＆＃39;％＆＃39 ;;

这将使图表垂直，但它们将被堆叠，因此您需要对每个柱的定位进行一些工作。

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

＆＃13;

    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.float = 'left';
    		bar.style.marginRight = '10px';
    
    		bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
    		bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
    		percent = ((participant[i].points / maxPoints) * 100) + '%';
    		bar.innerHTML = ['<p>', participant[i].name, '<br />', percent, '</p>'].join('');
    
    		container.appendChild(bar);
    
    		i = i + 1;
    	}
    };

＆＃13;

更改代码以获取javascript中的竖线

1 个答案: