数组中的动态javascript变量名

我有一个来自php的变量$blade，我为每个blade创建一个div和图形：

<div id="$blade" style="width:1000px; height:300px;"></div>

g$blade = new Dygraph(document.getElementById("$blade"),"./Data/$node/$blade.txt",{ legend: 'always', title: '$node-$blade', valueRange: [0, 120],visibility: [true, true]});

---

我找到了这个问题的答案，因为我使用$blade作为div id，它被认为是div元素而不仅仅是字符串。因此，我将图形元素放在一个对象中，其中key为$blade，value为graph对象，并将div id从$blade更改为div$blade。 如果有人有更好的建议，我会感谢他/她

<div id="div$blade" style="width:1000px; height:300px;"></div>

<script type="text/javascript">
var graphs={};
graphs.$blade = new Dygraph(document.getElementById("div$blade"),"./Data/$node/$blade.txt",{ legend: 'always', title: '$node-$blade', valueRange: [0, 120],visibility: [true, true]});

function saveImage() {
            for (var key in graphs){
                    var filename = key+".png";
                    Dygraph.Export.asPNG(graphs[key], img);
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0);
                    var link = document.createElement('a');
                    link.download = filename;
                    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    link.click();
                    }}

---

您能改进问题的格式吗？您是否首先初始化了画布，例如：var c=document.getElementByIdmyCanvas；var ctx=c.getContext2d；在函数saveImage中，您执行ctx.drawImageimg，0，0，其中定义了img？是的，我执行了，我不想提出问题，因为不会太长，我现在已经添加了它。您一定要注意变量范围。

    <img id="img" style="display:none"/>
    <canvas id="canvas" width="1000" height="300" style="display:none" >canvas</canvas>


    <script type="text/javascript">
        var img = document.getElementById("img"); 
        var canvas = document.getElementById("canvas");
        canvas.style.display="none";
        var ctx = canvas.getContext("2d");
function saveImage() {
    blades.forEach(function(entry) {
            var filename = entry+".png";
            //Dygraph.Export.asPNG(gSC_2_1, img); //this works for a single graph download
            //Dygraph.Export.asPNG(entry, img); //this doesn't work
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0);
            var link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            link.click();
            });
};
    </script>

Uncaught Type Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

<div id="div$blade" style="width:1000px; height:300px;"></div>

<script type="text/javascript">
var graphs={};
graphs.$blade = new Dygraph(document.getElementById("div$blade"),"./Data/$node/$blade.txt",{ legend: 'always', title: '$node-$blade', valueRange: [0, 120],visibility: [true, true]});

function saveImage() {
            for (var key in graphs){
                    var filename = key+".png";
                    Dygraph.Export.asPNG(graphs[key], img);
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0);
                    var link = document.createElement('a');
                    link.download = filename;
                    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    link.click();
                    }}