Question

我有一个简单的图表，我想从我的HTML表单上的字段更新。当我输入“硬编码”数字时，我可以得到图形 - 但是当我尝试使用变量声明时，它不起作用。

我还希望它能够重新渲染图表......

我知道你们都会以简单的方式摇摇头，而且我很可能 - 在有人启发我做错了或不做的事之后。

无论如何 - 这里是3个字段和图形的代码（你会注意到我在“dataPoints：”下使用了变量“q”，“c”和“b”）：

<!DOCTYPE HTML>
<form>
    <label for="QSUMTOT">QSUMTOT entry:</label>
    <input id='QSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
    <label for="CSUMTOT">CSUMTOT entry:</label>
    <input id='CSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
    <label for="BSUMTOT">BSUMTOT entry:</label>
    <input id='BSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
    <div id="chartContainer" style="height: 300px; width: 400px;"></div>
</form>

<script type="text/javascript" src="assets/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var q = document.getElementById("QSUMTOT").value;
        var c = document.getElementById("CSUMTOT").value;
        var b = document.getElementById("BSUMTOT").value;
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text: "Graphic results of Analysis"
            },
            data: [//array of dataSeries
                { //dataSeries object
                    type: "column",
                    dataPoints: [
                        { label: "Quality System", y: q },
                        { label: "Compliance", y: c },
                        { label: "Business", y: b }
                    ]
                }
            ]
        });
        chart.render();
    }
  </script>

Answer 1

意外地发现了答案：

function summary(){

    var qSumTot = document.getElementById("QTOT").value;
    var cSumTot = document.getElementById("CTOT").value;
    var bSumTot = document.getElementById("BTOT").value;
    var q = qSumTot.substring(0, qSumTot.length -1);
    var c = cSumTot.substring(0, cSumTot.length -1);
    var b = bSumTot.substring(0, bSumTot.length -1);
    var analTot = [q * 1, c * 1, b * 1]
    var str = document.getElementById('SUMTOT').value;
    var rstr = str.substring(0, str.length - 1);
    var qms = analTot[0];
    var comp = analTot[1];
    var bus = analTot[2];

    document.getElementById("QSUMTOT").value = qSumTot;
    document.getElementById("CSUMTOT").value = cSumTot;
    document.getElementById("BSUMTOT").value = bSumTot;
    document.getElementById('SUMTOT').value = (parseInt(((q*1) + (c*1) + (b*1))/3) + "%");
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Graph of Analysis"
        },
        axisY:{
            suffix: "%"
        },
        data: [{
            type: "column",
            toolTipContent: "{y}%",
            dataPoints: [{
                label: "QMS",
                y: qms
            }, {
                label: "Compliance",
                y: comp
            }, {
                label: "Business",
                y: bus
            }]
        }]
    });
    chart.render();
}

从HTML表单上的字段更新CanvasJS图表

1 个答案: