时间戳

首页 > 解决方案 > 即使代码在那里，画布也不显示

javascript - 即使代码在那里，画布也不显示

问题描述

我正在尝试以编程方式在我的模块中的魔镜仪表板上显示一个仪表。

以下是我的代码示例：

    var indoorGauge = document.createElement('canvas');
    indoorGauge.id = 'indoorGauge';
    ...
    indoorGauge.setAttribute('data-animation-target','plate');  
    indoorPressure.appendChild(indoorGauge);        
    insideTele.appendChild(indoorPressure);
    wrapper.appendChild(insideTele);

仪表不显示或渲染。我发现奇怪的是，当我检查元素时，画布就在那里并且它可以工作，因为当我剪切元素并重新粘贴它时，它会显示出来并完美地工作！

在此处输入图像描述

如果我“剪切”和“粘贴”上面的画布元素，仪表将显示得很好。

在此处输入图像描述

标签： javascriptmagic-mirror

解决方案

根据文档，如果你想用 Javascript 加载仪表，你应该使用他们的 API。

const indoorGauge = document.createElement('canvas');

indoorGauge.id = "indoorGauge"
document.body.appendChild(indoorGauge);

new LinearGauge({
  renderTo: 'indoorGauge'
}).draw();
<script src="https://unpkg.com/canvas-gauges@2.1.7/gauge.min.js"></script>

我想这是因为您正在使用 Javascript 附加画布，但没有使用仪表 API，这就是为什么您在第一次添加它时看到脚本没有拾取动态创建的画布元素的问题

推荐阅读