Bootstrap模式与Chart.js线图 [英] Bootstrap Modal with Chart.js linechart

问题描述

我有一个Twitter Bootstrap 3 Modal 窗口，我要绘制一个 Chart.js 线图。但每次我打开模态，canvas元素的高度和宽度为0.如果我改变这些值，图表是空的。它似乎图表从来没有绘制，但我没有得到任何控制台输出或错误。

Modal：

 < div class =modal fadeid =exampleModaltabindex = -  1role =dialogaria-labelledby =exampleModalLabel hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span class =sr-only>关闭< / span>< / button> 
< h4 class =modal-titleid =exampleModalLabel>新讯息< / h4> 
< / div> 
< div class =modal-body> 
< p>文字< / p> 
< canvas id =canvaswidth =400height =400>< / canvas> 
< p>文字< / p> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
  

Javascript ：

  $（'＃exampleModal'）。on（'show.bs.modal'，function（event）{
 
 var button = $（event。 relatedtarget）; 
 var modal = $（this）; 
 var canvas = modal.find（'。modal-body canvas'）; 
 
 //图表初始化
 var ctx = canvas [0] .getContext（2d）; 
 var chart = new Chart（ctx）.Line（{
 labels：[January，February，March ，April，May，June，July]，
 datasets：[
 {
 fillColor：rgba（190,144,212,0.2），
 strokeColor ：rgba（190,144,212,1），
 pointColor：rgba（190,144,212,1），
 pointStrokeColor：#fff，
 pointHighlightFill：#fff，
 pointHighlightStroke：rgba（220,220,220,1），
 data：[65，59，80，81，56，55，40] 
}，
 {
 fillColor： rgba（151,187,205,0.2），
 strokeColor：rgba（151,187,205,1），
 pointColor：rgba（151,187,205,1），
 pointStrokeColor：#fff 
 pointHighlightFill：#fff，
 pointHighlightStroke：rgba（151,187,205,1），
 data：[65，59，80，81，56，55，40] 
} 
] 
}，{}）; 
}）; 
   
 
 
 
 按钮：
 < button type =buttonclass =btn btn-primarydata-toggle =modaldata-target =＃exampleModaldata-id = ？php echo $ var [id];？>>打开< / button> 
  
缺少什么？为什么图表永远不会绘制？
 
 
 
感谢
解决方案
错误的事件。
  $（'＃exampleModal'）。on（'shown.bs.modal'，function {}）; 
  
工程！
 
I have a Twitter Bootstrap 3 Modal window and i want to draw an Chart.js linechart in it. But every time i open the modal the canvas element has a height and a width of 0. If i change these values the chart is empty. it seems like the chart is never drawn but i doesnt get any console output or errors.

Modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
                <p>Text</p>
                <canvas id="canvas" width="400" height="400"></canvas>
                <p>Text</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
Javascript:
$('#exampleModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget);
    var modal = $(this);
    var canvas = modal.find('.modal-body canvas');

    // Chart initialisieren
    var ctx = canvas[0].getContext("2d");
    var chart = new Chart(ctx).Line({
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                fillColor: "rgba(190,144,212,0.2)",
                strokeColor: "rgba(190,144,212,1)",
                pointColor: "rgba(190,144,212,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            }
        ]
    }, {});
});
Button:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<?php echo $var["id"]; ?>">Open</button>
What is missing? Why the chart never gets drawn?

Thanks
解决方案
It was the wrong event.
$('#exampleModal').on('shown.bs.modal', function (event) {});
Works!

                        
这篇关于Bootstrap模式与Chart.js线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！