Question

我试图通过ajax动画一些变量。变量本身的更新工作正常。我需要将这些变量传递给Javascript Canvas Gauge。我在网上发现了这段代码Javascript Canvas Gauge。底部有一个HTML滑块。我想用我的一个ajax变量替换它。

我想我必须在这里做出改变

get()

我尝试用我的ajax变量替换var demoInput = document.getElementById('demoInput'); demoInput.oninput = function(e){ console.log(this.value); demo.setAttribute('data-val', this.value);};`，但我认为有一个鼠标事件需要更新仪表。我对Javascript很陌生，也许这里有人可以给我一个提示。谢谢！

Answer 1

漂亮的转速计样品！为了您的目的

首先从示例

中删除此html代码，然后删除demoInput

    <div style="text-align: center;">
        <input type="range" id="demoInput" min="0" max="100" value="0">
    </div>

第二次更新js这样的代码

    var demo;
    window.onload = function(){
        demo = document.getElementById('demo');
        tacho(demo, {
            "title": "Widgets Per Second", 
            "max": 110,
            "markInterval": 2,
            "bigMarkInterval": 10,
            "redLinePoint": 0.85,
            "autoScale": false
        });
    };

请注意，这里我将demo放在外面以成为全局变量，以便于重用。我也删除了

    var demoInput = document.getElementById('demoInput');
    demoInput.oninput = function(e){
        console.log(this.value);
        demo.setAttribute('data-val', this.value);
    };

因为你想用你的ajax变量替换demoInput

最后用你的ajax变量更新canvas，因为你没有指定你的ajax函数和变量。我只举一个简单的例子

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $.ajax({
          url: "/test.php",
          success: function( your_ajax_variable ) {
            demo.setAttribute('data-val', your_ajax_variable);  // Update canvas by your ajax variable here
          }
        });
    </script>

在您的代码中，我认为您可以在ajax函数中调用demo.setAttribute('data-val', your_ajax_variable)来更新画布

将ajax变量传递给Canvas

1 个答案: