javascript - 我如何稍后绑定(bind) billboardjs 图表？

Question

The docs假设当图表未绑定(bind)时，它将开始观察 Chart.element 属性。我尝试不为传递给生成的选项对象设置bindto属性，并将其设置为null。但是，如果我稍后将 Chart.element 属性设置为任何内容，即 chart.element = document.getElementById("#chart-here")，则不会发生任何情况。

这样做的正确方法是什么？或者是我误解了什么？谢谢。

Answer 1

您只需要使用setTimeout https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

var generateChart = function () {
  bb.generate({
    data: {
      columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
      ]
    },
    bindto: "#chart-here"
  });
};
setTimeout(generateChart, 2000)

<title>billboard.js</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
Chart will appear in 2 seconds...
<div id="chart-here"></div>