我试图在bootstrap按钮上创建bootstrap popover，其内容是折线图chart.js。然而，当我单击按钮时，popover显示我提供的所有内容，但不是折线图。请注意，我设置html true，以便popover可以接受HTML内容。
我已经尝试了从chart.js的recommedations（辅助功能部分），引导弹出框.但我仍然没有工作.我通过在弹出框中添加文本内容进行测试，它工作坚果不工作折线图.这里是我的代码.感谢大家花时间阅读我的问题.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg==" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.min.js" integrity="sha512-tQYZBKe34uzoeOjY9jr3MX7R/mo7n25vnqbnrkskGr4D6YOoPYSpyafUAzQVjV6xAozAqUFIEFsCO4z8mnVBXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script> -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- <script src='https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js'></script> -->
</head>
<body>
<div class="container py-3">
<!-- Create popover trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" title="Chart">Open Chart</button>
</div>
<script>
// Chart data
// import Chart from 'chart.js/auto';
var chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
// Chart options
var chartOptions = {
scales: {
y: {
beginAtZero: true
}
}
};
// Create chart canvas
var chartCanvas = document.createElement('canvas');
chartCanvas.id = 'myChart';
chartCanvas.role = "img";
chartCanvas.setAttribute("aria-label","Hello world");
chartCanvas.style.width = '400px';
chartCanvas.style.height = '300px';
console.log(chartCanvas.outerHTML);
// Render chart
var myChart = new Chart(chartCanvas, {
type: 'line',
data: chartData,
options: chartOptions
});
console.log(chartCanvas.outerHTML)
// Create popover content
var content = '<div class="chart-container">' + chartCanvas.outerHTML + '<h1>Hello</h1>' + '</div>';
// Initialize popover
var popover = new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'), {
container: 'body',
content: content,
html: true
});
</script>
</body>
1条答案
按热度按时间6tqwzwtp1#
所以，我让它工作。
I forked your CodePen, so you can see the functioning solution here.
在绘制图表之前，您的canvas元素需要已经在DOM中。因此，我更改了代码，以便仅将canvas元素插入到弹出框中。然后，我为 Bootstrap 事件“inserted.bs.popover”添加了一个事件侦听器，该事件将在弹出框插入到DOM中后调用。以下是Bootstrap弹出框事件的文档。
添加该事件侦听器的代码如下所示：
我希望这对你的问题有帮助。
辅助功能旁
由于您希望将可访问性纳入您的图表，我还添加了一些额外的可访问性代码到该codepen。我在开源库Chart 2 Music上工作，我将其chartjs插件添加到您的代码中。您可以通过以下方式自己玩它：
1.按Tab键，直到您到达“打开图表”按钮。
1.按空格键打开按钮（这是通过Bootstrap完成的）
1.再次按Tab键。您将关注弹出框中的图表。
1.按下左/右箭头键。您将在图表中移动，并听到声音（“发音”）来表示值。
我在Chart 2 Music特定的行之前添加了注解，所以希望它不会令人困惑。
如果您有任何问题，请告诉我！