将 JavaScript 内容放在 Bootstrap Popover 中

Question

我在将 JavaScript 放入我的 Popover 中时遇到了问题。我想在单击时将图表.js中的图形放置在弹出框内。为了示例，让我们使用其文档中的示例图 http://www.chartjs.org/docs/latest/

到目前为止，我有我的弹出框 -

<button type="button" 
        class="btn btn-lg btn-primary" 
        data-toggle="popover" 
        title="Good vs. Evil Winrate" 
        data-placement="bottom" 
        data-content="Graph coming soon!">
    Who's Winning?
</button>

而 jQuery 来初始化它——

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

我

只是不明白如何将图形放置在弹出框内，我尝试过的所有内容都将其破坏到弹出框根本无法打开的程度。

Answer 1

可以直接在 JavaScript 中设置弹出框选项，也可以监听事件。

这里的重要选项是html: true，它允许将 HTML 放置在弹出框内容中，否则显示为字符串。

content选项文档指出：

默认内容值(如果data-content属性不存在(。

然后，侦听 shown.bs.popover 事件，我们获取之前使用 jQuery 放置的<canvas>，并将其作为新 Chart.js 实例的上下文传递。

$('[data-toggle="popover"]').popover({
  html: true,
  content: '<canvas id="myChart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {
  new Chart($('#myChart'), {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    },
    // Configuration options go here
    options: {}
  });
});

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Good vs. Evil Winrate" data-placement="bottom">Who's Winning?</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>