0

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

1 に答える 1

0

まったく偶然に答えを発見しました：

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();
}
于 2014-06-02T06:24:13.717 に答える