gpt4 book ai didi

javascript - 在 Bootstrap Popover 中放置 JavaScript 内容

转载 作者:行者123 更新时间:2023-11-29 10:31:42 26 4
gpt4 key购买 nike

我在将 JavaScript 放入 Popover 时遇到问题。单击时,我想在 Popover 中放置一个来自 Chart.js 的图表。为了这个例子,让我们使用他们文档中的示例图 http://www.chartjs.org/docs/latest/

到目前为止我有我的 Popover -

<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();
});

我只是不明白如何将图形放在 Popover 中,我尝试过的所有操作都将其破坏到 Popover 根本无法打开的程度。

最佳答案

您可以设置 popover options in JavaScript直接,你也可以听事件。

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

content option documentation状态:

Default content value if data-content attribute isn't present.

然后,收听 shown.bs.popover事件,我们得到之前放置的 <canvas>使用 jQuery 并将其作为上下文传递给新的 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>

关于javascript - 在 Bootstrap Popover 中放置 JavaScript 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44579887/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com