Question

我想要实现的目标应该相当简单，但我会碰到一堵墙。在概念中，当数值以某种形式改变时，它将激活JavaScript onChange命令并立即更新雷达图。初始值会进入图表，但任何更改都不会被传递。我没有提交按钮就试图这样做。

有什么想法吗？

<!doctype html>
<html>

<head>
    <title>Radar Chart</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="http://www.chartjs.org/dist/2.6.0/Chart.bundle.js"></script>
    <script src="http://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
valueToSocietyScore: <input type="number" id="valueToSocietyScore" name="valueToSocietyScore" value = '10' onchange="valueToSocietyScoregetData(this)"><br>
efficacyScore: <input type="number" id="efficacyScore" name="efficacyScore" value = '10' onchange="efficacyScoregetData(this)"><br>
impactMagnitudeScore: <input type="number" id="impactMagnitudeScore" name="impactMagnitudeScore" value = '10' onchange="impactMagnitudeScoregetData(this)"><br>
scalabilityScore: <input type="number" id="scalabilityScore" name="scalabilityScore" value = '10' onchange="scalabilityScoregetData(this)"><br>
missionAlignmentScore: <input type="number" id="missionAlignmentScore" name="missionAlignmentScore" value = '10' onchange="missionAlignmentScoregetData(this)"><br>
esgScore: <input type="number" id="esgScore" name="esgScore" value = '10' onchange="esgScoregetData(this)"><br>

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="myChart"></canvas>
</div>
<script>
function valueToSocietyScoregetData(){
    return document.getElementById("valueToSocietyScore").value;
}

function efficacyScoregetData(){
    return document.getElementById("efficacyScore").value;
}

function impactMagnitudeScoregetData(){
    return document.getElementById("impactMagnitudeScore").value;
}

function scalabilityScoregetData(){
    return document.getElementById("scalabilityScore").value;
}

function missionAlignmentScoregetData(){
    return document.getElementById("missionAlignmentScore").value;
}

function esgScoregetData(){
    return document.getElementById("esgScore").value;
}


var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["Value to Society score", "Efficacy score", "Impact Magnitude score", "Scalability score", "Mission Alignment score", "ESG score "],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgba(0, 0, 255, 0.2)',
            borderColor: 'rgb(0, 0, 255)',
            data: [valueToSocietyScoregetData(), efficacyScoregetData(), impactMagnitudeScoregetData(), scalabilityScoregetData(), missionAlignmentScoregetData(), esgScoregetData()],
        }]
    },

    options: {
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Radar Chart'
        },
        scale: {
            ticks: {
                fixedStepSize: 1,
                beginAtZero: true
            }
        }
    }

});



</script>
</body>

</html>

Answer 1

我不认为onchange适用于输入，至少就是你写的方式。

你可以像这样使用jQuery的.change：

$('input[name=valueToSocietyScore]').change(function() { ... });

Javascript OnChange更新数据

1 个答案: