如何在提交时使用用户给定的输入生成和显示条形图[关闭]答案

【问题标题】：How to generate and show a bar diagram with using user given input while submitting [closed]如何在提交时使用用户给定的输入生成和显示条形图[关闭]
【发布时间】：2020-10-30 04:06:47
【问题描述】：

我想显示一个接受用户输入的表格，例如国家/地区的详细信息和在任何冠军联赛中获得的奖牌数，并在提交表单时使用 javascript 将其显示为条形图。

【问题讨论】：

你能展示一下你到目前为止所做的尝试吗？您对数组的挑战是如何呈现它，还是如何构建图表？
@HenkLangeveld 我已经尝试了一个示例并将其发布为答案。我已经用 canvas.js 完成了这个。请检查。

标签： javascript html arrays object canvasjs

【解决方案1】：

所以这里是我准备的示例并且工作正常。

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="tableClass">
        <h1>Asia Olympics 2018</h1>
        <label>Country : </label>
        <input name="country" id="country"/></br>
        <label>Gold : </label>
        <input name="gold" id="goldcount" onkeyup="validNumber(this.value, goldcount)"/></br>
        <label>Silver : </label>
        <input name="silver" id="silvercount" onkeyup="validNumber(this.value, silvercount)"/></br>
        <label>Bronze : </label>
        <input name="bronze" id="bronzecount" onkeyup="validNumber(this.value, bronzecount)"/></br>
        <p id="error_display"></p>
        <button id="save" type="button" onclick="savedata()">Submit</button>
    </div>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
<script>
    // Validate number for medals count
    function validNumber(val, number) {
        number.value = val.replace(/[^0-9]/g, "");
    }
    let olympics = [];
    // Save form data function
    function savedata(){
        let contry = document.getElementById('country').value;
        let gold = document.getElementById('goldcount').value;
        let silver = document.getElementById('silvercount').value;
        let bronze = document.getElementById('bronzecount').value;
        let error = document.getElementById('error_display');
        error.style.display = 'none';
        if(contry == '' || gold == '' || silver == '' || bronze == '') {
          error.innerHTML = 'Please enter all the fileds!';
          error.style.display = 'block';
          error.style.color = 'red';
          return false;
        }
        let obj = {contry, gold, silver,bronze};
        olympics.push(obj);
        localStorage.setItem('olympicsData', JSON.stringify(olympics));
        contry = '';
        gold = '';
        silver = '';
        bronze = '';
        showGraph();
    }
    // Show the pie diagram chart
    function showGraph() {
        let details = JSON.parse(localStorage.getItem("olympicsData"));
        let dps1 = [];
        let dps2 = [];
        let dps3 = [];
        details.map((data) => {
            dps1.push({y: parseInt(data.gold), label: data.contry});
            dps2.push({y: parseInt(data.silver), label: data.contry});
            dps3.push({y: parseInt(data.bronze), label: data.contry});
        } )
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            title: {
                text: "Asia Olympics - 2018"
            },
            data: [
            {
                type: 'bar',
                yValueFormatString: "##\" Gold medals\"",
                indexLabel: "{y}",
                dataPoints: dps1
            },
            {
                type: 'bar',
                yValueFormatString: "##\" Silver medals\"",
                indexLabel: "{y}",
                dataPoints: dps2
            },
            {
                type: 'bar',
                yValueFormatString: "##\" Bronze medals\"",
                indexLabel: "{y}",
                dataPoints: dps3
            }
            ]
        });
        chart.render();
    }
</script>
</html>

我希望这会有用。试试吧！

【讨论】：

干得好。也许codereview.stackexchange.com 将是此示例的更好站点，因为该问题并未具体指出任何问题。您可能还希望包含指向 js.do 等网站的链接，以便人们运行示例代码。